ngbCollapse 用于循环中的子组件
ngbCollapse for child components on a loop
我正在使用 ng-bootstrap
为我的 Angular 4 应用程序添加一些指令。现在我正在尝试实现一个带有链接的侧边栏,这些链接是动态填充的。我有一组父链接,它们会在点击时展开并显示一组其他链接(页面中的片段)。根据页面上的示例,这就是我所拥有的:
模板:
<ul *ngFor="let category of categories" class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="./" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed">{{category[0].name}}</a>
<ul class="nav flex-column">
<div id="questions{{category[0].id}}" [ngbCollapse]="isCollapsed">
<li *ngFor="let question of category[1]" class="nav-item">
<a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
</li>
</div>
</ul>
</li>
</ul>
代码:
export class QuestionListComponent implements OnInit {
public isCollapsed = true;
private categoryQuestions: Array<[Category, Question[]]>;
/* ... */
}
有些东西是在 ngOnInit()
上初始化的,但这不是重点。现在这在某种意义上是有效的,即父类别在页面加载时折叠,但单击单个类别会展开所有其他子组件。我的问题是:如何访问每个 category
的 [ngbCollapse]
属性,以便我可以在 (click)
事件中修改它?我可以修改模板中的任何内容。我确实注意到 ngbCollapse 仅适用于 <div>
我正在使用的版本 ("@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26")
更新:
有人建议我根据 original one. 制定自己的指令,但我仍然没有看到不应该在各组之间共享状态。
<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
<button class="btn btn-link" [appQuestionCollapser]="categoryQuestion[0].id"
[attr.aria-expanded]="!isCollapsed">{{categoryQuestion[0].name}}</button>
<ul class="nav flex-column">
<div id="questions{{categoryQuestion[0].id}}" class="collapse">
<li *ngFor="let question of categoryQuestion[1]" class="nav-item">
<a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
</li>
</div>
</ul>
</li>
import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[appQuestionCollapser]'
})
export class QuestionCollapserDirective {
@Input('appQuestionCollapser') categoryId: number;
public collapsed: boolean;
constructor(private el: ElementRef) { this.collapsed = true; }
@HostListener('click') onCategoryClick() {
this.el.nativeElement.className += ' active';
const element = document.querySelector('#questions' + this.categoryId);
if (this.collapsed) {
element.classList.add('show');
} else {
element.classList.remove('show');
}
this.collapsed = !this.collapsed;
}
}
此外,有时我会突然收到错误 Can't bind to 'appQuestionCollapser' since it isn't a known property of 'button'.("yQuestions" class="nav flex-column"> <li class="nav-item"> <button class="btn btn-link" [ERROR ->][appQuestionCollapser]="categoryQuestion[0].id"
。有什么想法吗?
我只需要更改模板上的输入即可。使用锚标签就可以了。
<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
<a class="btn btn-link" appQuestionCollapser="{{categoryQuestion[0].id}}" routerLink="./">{{categoryQuestion[0].name}}</a>
<ul class="nav flex-column">
<div id="questions{{categoryQuestion[0].id}}" class="collapse">
<li *ngFor="let question of categoryQuestion[1]" class="nav-item">
<a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
</li>
</div>
</ul>
</li>
</ul>
我正在使用 ng-bootstrap
为我的 Angular 4 应用程序添加一些指令。现在我正在尝试实现一个带有链接的侧边栏,这些链接是动态填充的。我有一组父链接,它们会在点击时展开并显示一组其他链接(页面中的片段)。根据页面上的示例,这就是我所拥有的:
模板:
<ul *ngFor="let category of categories" class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="./" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed">{{category[0].name}}</a>
<ul class="nav flex-column">
<div id="questions{{category[0].id}}" [ngbCollapse]="isCollapsed">
<li *ngFor="let question of category[1]" class="nav-item">
<a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
</li>
</div>
</ul>
</li>
</ul>
代码:
export class QuestionListComponent implements OnInit {
public isCollapsed = true;
private categoryQuestions: Array<[Category, Question[]]>;
/* ... */
}
有些东西是在 ngOnInit()
上初始化的,但这不是重点。现在这在某种意义上是有效的,即父类别在页面加载时折叠,但单击单个类别会展开所有其他子组件。我的问题是:如何访问每个 category
的 [ngbCollapse]
属性,以便我可以在 (click)
事件中修改它?我可以修改模板中的任何内容。我确实注意到 ngbCollapse 仅适用于 <div>
我正在使用的版本 ("@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26")
更新:
有人建议我根据 original one. 制定自己的指令,但我仍然没有看到不应该在各组之间共享状态。
<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
<button class="btn btn-link" [appQuestionCollapser]="categoryQuestion[0].id"
[attr.aria-expanded]="!isCollapsed">{{categoryQuestion[0].name}}</button>
<ul class="nav flex-column">
<div id="questions{{categoryQuestion[0].id}}" class="collapse">
<li *ngFor="let question of categoryQuestion[1]" class="nav-item">
<a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
</li>
</div>
</ul>
</li>
import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[appQuestionCollapser]'
})
export class QuestionCollapserDirective {
@Input('appQuestionCollapser') categoryId: number;
public collapsed: boolean;
constructor(private el: ElementRef) { this.collapsed = true; }
@HostListener('click') onCategoryClick() {
this.el.nativeElement.className += ' active';
const element = document.querySelector('#questions' + this.categoryId);
if (this.collapsed) {
element.classList.add('show');
} else {
element.classList.remove('show');
}
this.collapsed = !this.collapsed;
}
}
此外,有时我会突然收到错误 Can't bind to 'appQuestionCollapser' since it isn't a known property of 'button'.("yQuestions" class="nav flex-column"> <li class="nav-item"> <button class="btn btn-link" [ERROR ->][appQuestionCollapser]="categoryQuestion[0].id"
。有什么想法吗?
我只需要更改模板上的输入即可。使用锚标签就可以了。
<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
<a class="btn btn-link" appQuestionCollapser="{{categoryQuestion[0].id}}" routerLink="./">{{categoryQuestion[0].name}}</a>
<ul class="nav flex-column">
<div id="questions{{categoryQuestion[0].id}}" class="collapse">
<li *ngFor="let question of categoryQuestion[1]" class="nav-item">
<a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
</li>
</div>
</ul>
</li>
</ul>