gpt4 book ai didi

angular - 创建 TemplateRef 并将其插入组件的模板中

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

Angular 5.0.2基于 NgTemplateOutlet 上提供的示例 https://angular.io/api/common/NgTemplateOutlet

我想知道是否有办法动态创建一个 TemplateRef,然后将其注入(inject)到组件的模板中。

例如,假设一个组件具有以下模板

<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>

组件代码

class NgTemplateOutletExample {
myContext = {$implicit: 'World'};
}

我想要的是将其转换为具有以下模板的组件

<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>

和这样的组件代码

class NgTemplateOutletExample {
eng:TemplateRef = this.createTemplateRef('<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>');
myContext = {$implicit: 'World'};
}

是否可以从字符串创建 TemplateRef

最佳答案

您想要的是拥有动态模板。以便您可以在不更改相同组件的情况下稍后放置模板。

现在您如何实现这一点?

创建主要组件呈现模板。 <main-component>

main.component.html

<div class="box">
<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="context"></ng-container>
</div>

main.component.ts

import { Component, OnInit, TemplateRef, ContentChild } from '@angular/core';

@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

constructor() { }

@ContentChild("template")
template :TemplateRef<any>;

ngOnInit() {

}

get context(){
return this;
}

}
  • 现在您可以使用不同的模板使用相同的组件*

app.component.html

<app-main>
<ng-template #template>Content From First Template</ng-template>
</app-main>
<br>
<app-main>
<ng-template #template>Content From Second Template</ng-template>
</app-main>

输出

enter image description here

工作演示在这里 https://stackblitz.com/edit/angular-yzkwrq

关于angular - 创建 TemplateRef 并将其插入组件的模板中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47371976/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com