Angular 2动态更改ngTemplateOutlet中的模板

问题描述

我想动态更改ngTemplateOutlet中的模板.当selectedTab更改时，ngTemplateOutlet也会更改.

I want to dynamically change the template in the ngTemplateOutlet.The ngTemplateOutlet would change when the selectedTab changes.

我下面有两个基本模板，分别称为#Tab1和#Tab2.

I have two basic templates below called #Tab1 and #Tab2.

注意:我正在使用角度版本4.

Note: I'm using angular version 4.

标签菜单示例(HTML):

<div class="tabMenu">
    <ul>
        <li *ngFor="let tab of tabLinks" [class.active]="selectedTab.name === tab.name">
            <a (click)="selectedTab = tab">{{ tab.name }}</a>
        </li>
    </ul>

    <div class="tabContent">
        <tab [data]="selectedTab.data">
            <ng-container *ngTemplateOutlet="selectedTab.name;context:selectedTab"></ng-container>
        </tab>

        <ng-template class="tab1" #Tab1 let-test="data">
            <p>Template A - {{ test }}</p>
        </ng-template>

        <ng-template class="tab1" #Tab2 let-test="data">
            <p>Template B - {{ test }}</p>
        </ng-template>

    </div>
 </div>

这是基本的打字稿数组:

tabLinks: Array<Object> = [
    {
        name: "Tab1",
        data: "data tab 1"
    },
    {
        name: "Tab2",
        data: "data tab 2"
    }
];

selectedTab: Object = this.tabLinks[0];

推荐答案

如果使用@ViewChild()代替直接模板变量引用，则可以使用this['foo']访问名为foo的字段:

If you use @ViewChild() instead of a direct template variable reference, you can use this['foo'] to access a field named foo:

@ViewChild('Tab1') tab1:TemplateRef<any>;
@ViewChild('Tab2') tab2:TemplateRef<any>;

    <ng-template class="tab1" #Tab1 let-test="data">
        <p>Template A - {{ test }}</p>
    </ng-template>

    <ng-template class="tab1" #Tab2 let-test="data">
        <p>Template B - {{ test }}</p>
    </ng-template>

        <ng-container *ngTemplateOutlet="this[selectedTab.name];context:selectedTab"></ng-container>

这篇关于Angular 2动态更改ngTemplateOutlet中的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！