【问题标题】:How can I load components added in tab using angular4?如何使用 angular4 加载选项卡中添加的组件?
【发布时间】:2018-04-04 19:07:16
【问题描述】:

我正在使用 angular4 和 angular material2。

我有以下代码

<md-tab-group color="primary">
        <md-tab label="Employee">
            <app-employee></app-employee>
        </md-tab>
        <md-tab label="Department">
            <app-department></app-department>
        </md-tab>
        <md-tab label="Attendance">
            <app-attendance></app-attendance>
        </md-tab>
    </md-tab-group>

现在所有组件最初都已加载,但我希望在选择相应选项卡时加载特定组件。

【问题讨论】:

    标签: angular angular2-forms


    【解决方案1】:

    注意。 Angular Material 最近已更新,组件已重命名,例如&lt;md-tab&gt; 现在是 &lt;mat-tab&gt;。医生:https://material.angular.io/components/tabs/api

    你想要的是延迟加载标签内容。根据 Angular 材料文档,目前似乎不可能。

    以下是一些解决方法:

    选项 1. 根据标签组的 selectedIndex 属性激活子组件

    <mat-tab-group color="primary" #tabGroup>
      <mat-tab label="Employee">
        <app-employee *ngIf="tabGroup.selectedIndex === 0"></app-employee>
      </mat-tab>
      <mat-tab label="Department" #tabDepartment>
        <app-department *ngIf="tabGroup.selectedIndex === 1"></app-department>
      </mat-tab>
      <mat-tab label="Attendance">
        <app-attendance *ngIf="tabGroup.selectedIndex === 2"></app-attendance>
      </mat-tab>
    </mat-tab-group>
    

    选项 2. 监听标签组上的selectedIndexChange() 事件

    并在该事件的事件处理程序中动态加载一些内容。

    类似:

    <mat-tab-group (selectedIndexChange)="loadDynamicContent()">
      <mat-tab>
        {{ dynamicContent }}
      </mat-tab>
    </mat-tab-group>
    

    我在这里找到了这个想法:https://stackoverflow.com/a/45980187

    【讨论】:

      【解决方案2】:

      HTML 文件

      <mat-tab-group (selectedIndexChange)="selectTab($event)">
        <mat-tab label="Tab 1">
            <app-control1 *ngIf="selectedTab === 0"></app-control1>
        </mat-tab>
        <mat-tab label="Tab 2">
            <app-control2 *ngIf="selectedTab === 1"></app-control2>
        </mat-tab>
      </mat-tab-group>
      

      TS 文件

      声明新属性

      selectedTab = 0;
      

      更新选定索引更改事件的属性

      selectTab(event) {
      this.selectedTab = event;
      }
      

      【讨论】:

        【解决方案3】:

        使用*matTabContent 可以实现更简洁的解决方案,它修饰ng-template 标签并从中读出模板。

        <mat-tab-group>
          <mat-tab label="Employee">
            <app-employee *matTabContent></app-employee>
          </mat-tab>
          <mat-tab label="Department">
            <app-department *matTabContent></app-department>
          </mat-tab>
          <mat-tab label="Attendance">
            <app-attendance *matTabContent></app-attendance>
          </mat-tab>
        </mat-tab-group>
        

        请记住,每次打开选项卡时,都会(重新)初始化相应的组件。

        【讨论】:

        • @JsonK 如果我只想加载一次,只是第一次选择该选项卡,该怎么做?
        猜你喜欢
        • 1970-01-01
        • 2020-07-28
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-04-11
        • 2018-05-29
        相关资源
        最近更新 更多