Question

所以我有这个代码，它基本上是带有标签的导航栏。

 <mat-tab-group>
 <mat-tab>
    <ng-template mat-tab-label>
        main page 
    </ng-template>
    main page content
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
        <button mat-button [matMenuTriggerFor]="menu" style="color:black;" (click)="$event.stopPropagation()">Options</button>
        <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="changeTab(0)">A</button>
            <button mat-menu-item (click)="changeTab(1)">B</button>
            <button mat-menu-item (click)="changeTab(2)">C</button>
       </mat-menu>
    </ng-template>
      <app-events></app-events>
 </mat-tab>
 <mat-tab>
    <ng-template mat-tab-label>
        D
    </ng-template>
    <app-apply></app-apply>
 </mat-tab>
 <mat-tab >
    <ng-template mat-tab-label>
        E
    </ng-template>
    <app-faq></app-faq>
  </mat-tab>
</mat-tab-group>

我的一个选项标签我想成为下拉列表标签，但如果选择了材料2 立即更改为该标签视图（我不想要），而我想要显示菜单选项然后我想调整菜单项以显示相应的选项组件。

这是一个例子。所有字母在选中时都会在个别内容页面上显示，也是主页面。有没有办法用mat-tab-group加载所有内容？所有内容都是静态网站，这就是为什么我要加载它们而不是创建路由。

Answer 1

这就是我如何处理这样的问题。我为稍微匆忙的例子道歉。这是一个有效的stackblitz：https://stackblitz.com/edit/angular-xpfy1s

首先我创建了一个表示菜单结构的对象：

public menu: any = [{
      group: [
        {
          label: 'Parent1'
        },
        {
          label: 'Parent2' ,
          children: [
            {label: 'Item1'},
            {label: 'Item2'}
          ]
        }
      ]
  }];

然后我在模板中使用它：

<div *ngFor="let menuItem of menu">
  <div *ngFor="let option of menuItem.group">
    <button *ngIf="!option.children"><a href="#">{{option.label}}</a></button>

    <button *ngIf="option.children" (click)="option.expanded = !option.expanded">{{option.label}}</button>
    <ul *ngIf="option.expanded">
      <li *ngFor="let child of option.children"><a href="#">{{child.label}}</a></li>
    </ul>
  </div>
</div>

现在你可以看到第一个按钮，知道它没有任何子节点，因此创建一个包含<a>的按钮。这将是您触发标签更改的位置。

第二个按钮（包含子项）不会在按钮中呈现<a>标记，而是切换列表的可见性。

Answer 2

您好我在这里创建online demo

请检查这是否解决了您的问题？

如果是，那么它是如何工作的：

（点击）= “$ event.stopPropagation（）”

这会创建一个钩子来完成子事件，而不是从事件中激活菜单事件的父事件，而不是标签事件。

此外，请在此处粘贴完整代码：

<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 5">
        <ng-template mat-tab-label>
         <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
          <mat-icon aria-label="Example icon-button with a heart icon">settings</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
          <button mat-menu-item>Item 1</button>
          <button mat-menu-item>Item 2</button>
        </mat-menu>
        </ng-template>
        No content  
      </mat-tab>
</mat-tab-group>

修改

<mat-tab-group [selectedIndex]="selectedTab"> <mat-tab label="Main Page">Main Page Content</mat-tab> <mat-tab label="Tab 5" disabled> <ng-template mat-tab-label> <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()"> <mat-icon color="warn" aria-label="Example icon-button with a heart icon">more_vert</mat-icon> </button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="changeTab(2)">A</button> <button mat-menu-item (click)="changeTab(3)">B</button> <button mat-menu-item (click)="changeTab(4)">C</button> </mat-menu> </ng-template> No content </mat-tab> <mat-tab label="A">A Content</mat-tab> <mat-tab label="B">B Content</mat-tab> <mat-tab label="C">C Content</mat-tab> <mat-tab label="D">D Content</mat-tab> <mat-tab label="E">E Content</mat-tab> </mat-tab-group>

<强>组件：

selectedTab = 0; changeTab(tabIndex: number) { this.selectedTab = tabIndex; }

如何在选项卡中创建下拉列表？ Angular5与Material2

2 个答案: