下面是一个使用Angular 7,Bootstrap Collapse和aria-controls的动态值的示例解决方案:
首先,安装所需的包:
npm install bootstrap angular-bootstrap
在app.module.ts文件中引入所需的模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在app.component.ts文件中定义组件的逻辑:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
This is the content of the collapse
`
})
export class AppComponent {
isCollapsed = true;
toggleCollapse() {
this.isCollapsed = !this.isCollapsed;
}
}
在app.component.css文件中添加所需的样式:
.card {
margin-top: 20px;
}
在app.component.html文件中添加组件的模板:
最后,运行应用程序:
ng serve --open
现在,你应该能够点击按钮来切换折叠内容的显示和隐藏,并且aria-controls属性的值会根据折叠状态进行动态更改。