Angular借助指令传递模板

最新推荐文章于 2021-02-01 16:18:38 发布

weixin_34384681

最新推荐文章于 2021-02-01 16:18:38 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017549588

版权

上一篇中使用 @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>