选项卡上的Angular 4 Material Tabs Load

3 回答

• 3

  您可以使用 <md-tab-group> 提供的 selectChange 事件 . 更改选项卡选项时会触发它 . 来自documentation：

  @Output（）selectChange：选项卡选择发生更改时发出的事件 .

  在您的模板中：

  <md-tab-group (selectChange)="tabSelectionChanged($event)">
    <md-tab label="Tab 1">Content 1</md-tab>
    <md-tab label="Tab 2">
      This tab will load some morecontents after 5 seconds.
      <p>{{ moreContents }}</p>
    </md-tab>
  </md-tab-group>
  

  ...并在你的打字稿代码中：

  tabSelectionChanged(event){
      // Get the selected tab
      let selectedTab = event.tab;
      console.log(selectedTab);
  
      // Call some method that you want 
      this.someMethod();
  }
  

  链接到working demo .

  回复于 2024-04-26T16:37:25+08:00
• 1

  正如文档所述

  虽然<md-tab-group>用于在单个路径中切换视图，但<nav md-tab-nav-bar>提供了一个类似于标签的UI，用于在路径之间导航 .

  通过使用此方法，您可以使每个选项卡单独的路由，因此每次激活路由时每个页面加载 .

  <nav md-tab-nav-bar>
    <a md-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="link"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive">
      {{tabLink.label}}
    </a>
  </nav>
  
  <router-outlet></router-outlet>
  

  请在 Tabs and navigation 部分找到更多信息here .

  回复于 2024-04-26T16:37:25+08:00
• 1

  我知道问题是关于angular-material 5.x.x，但是对于那些到达这里并且没有注意的人来说，angular-material 6本身支持延迟加载选项卡内容https://material.angular.io/components/tabs/overview#lazy-loading .

  回复于 2024-04-26T16:37:25+08:00