Angular借助指令传递模板

2024年2月11日 273次阅读 来源: guanyj

上一篇中使用
@Host() @Optional() public hc: HelloComponent感觉不够优雅，也不符合正常数据传递流程。下面是改造后的实现逻辑。

在HelloComponent中使用ContentChildren获取所有HelloDirective。

@Component({
    selector: 'hs-hello',
    template: `
        <div>
            <ng-container *ngFor="let helloDirective of helloTemplates">
                <p>this is hello-for</p>
                <ng-container *ngTemplateOutlet="helloDirective.template"></ng-container>
            </ng-container>
        </div>
    `
})
export class HelloComponent {
    @ContentChildren(HelloDirective) helloTemplates: QueryList<HelloDirective>;
}

HelloDirective中将template向外暴露，借助指令传递TemplateRef,同时指令也起到了分类模板的作用

@Directive({
    selector: '[hsHello]'
})
export class HelloDirective {

    constructor(
        public template: TemplateRef<any>
    ) {}
}

示例


<hs-hello>
    <ng-template hsHello>
        <p>this is hello-1</p>
    </ng-template>

    <ng-template hsHello>
        <p>this is hello-2</p>
    </ng-template>

    <ng-template hsHello>
        <p>this is hello-3</p>
    </ng-template>
</hs-hello>
    原文作者：guanyj
    原文地址: https://segmentfault.com/a/1190000017549588
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞