循环

时间:2017-05-22 20:01:46

标签: angular ng-bootstrap

我正在使用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()初始化,但这不是主要关注点。现在,这可以在父类别在页面加载时折叠,但单击一个扩展所有其他子组件。我的问题是:如何访问每个[ngbCollapse]的{​​{1}}属性,以便我可以在category事件中对其进行修改?我可以从模板中修改任何内容。我注意到ngbCollapse仅适用于版本I上的(click)使用(&#34; @ ng-bootstrap / ng-bootstrap&#34;:&#34; ^ 1.0.0-alpha。 26&#34)

更新

有人建议我根据original one.做出我自己的指示。但是,我还没有看到国家不应该如何在各组之间分享。

<div>

<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; } } 。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我只需要更改模板上的输入。使用锚标签很好。

<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>