gpt4 book ai didi

Angular 2 动态更改 ngTemplateOutlet 中的模板

转载 作者:太空狗 更新时间:2023-10-29 17:26:36 26 4
gpt4 key购买 nike

我想动态更改 ngTemplateOutlet 中的模板。ngTemplateOutlet 将在 selectedTab 更改时更改。

下面有两个基本模板,分别称为#Tab1 和#Tab2。

注意:我使用的是 Angular 版本 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>

这是基本的 typescript 数组:

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

selectedTab: Object = this.tabLinks[0];

最佳答案

如果您使用@ViewChild() 而不是直接模板变量引用,您可以使用this['foo'] 来访问名为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 中的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46633431/

26 4 0