Question

我对angular确实很陌生，实际上我正在使用5 +，jquery和angular材质。我想实现两个导航选项卡。但是我不知道该如何处理。这是我想做什么的图片： nested navs

橙色部分代表主标签，蓝色部分代表第二个导航标签。默认情况下，它显示person1的年龄，因为默认情况下在主导航中选择了Person1。如果单击“名称”选项卡，则显示人员1的名称。如果单击人员2并显示名称，则显示人员2的名称。

我想从以下内容开始：

    <ul class="nav nav-tabs">
      <li *ngFor="#person of persons" (click)="selectTab(tab)">
        <a href="#"></a>
      </li>
    </ul>
    <ng-content></ng-content>

但是我不知道如何在选项卡中嵌套选项卡。也许还有另一种更好的方法。

而json看起来像这样：

 Persons = [ 
 {
    id: "1",
    title: "Person1",
    Name: "John",
    Age: "17",
    Job: "student"
}, 
 {
    id: "2",
    title: "Person2",
    Name: "Paul",
    Age: "40",
    Job: "Dentist"
}, 
]

谢谢。

找到了解决方案：：使用角形材料选项卡的标签。

  <mat-tab-group>
    <mat-tab label="Name">
      <mat-tab-group>
        <mat-tab *ngFor="let person of Persons;" [label]="person.title">{{person.Name}}</mat-tab>
      </mat-tab-group>
    </mat-tab>
    <mat-tab label="Job">
      <mat-tab-group>
       <mat-tab *ngFor="let person of Persons;" [label]="person.title">{{person.Job}}</mat-tab>
      </mat-tab-group>
    </mat-tab>
  </mat-tab-group>

但是可能会有更好的解决方案。希望它会有所帮助。：）

Angular 2+如何处理嵌套选项卡

0 个答案: