使用ng-template,ng-container和ngTemplateOutlet将输入模板的上下文设置为此

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ng-template,ng-container和ngTemplateOutlet将输入模板的上下文设置为此相关的知识,希望对你有一定的参考价值。

我有一个costumizable组件,使用ng-container来显示默认模板或传入模板。问题是我需要传入的模板将其上下文设置为嵌套的组件。我尝试将ngTemplateOutlet指令的context属性设置为包含嵌套组件的对象,但是它不起作用。

父组件html

<ng-template #didYouVisitQuestion>
    <div class="mt-10">
        <ds-radio-buttons
            ...
            (onSelectRadio)="alertx()"></ds-radio-buttons>
    </div>
</ng-template>
<nesting-component [questionTemplate]="didYouVisitQuestionTpl"></ds-rate-component>

父组件类/ TS:

@ViewChild('didYouVisitQuestion')
private didYouVisitQuestionTpl: TemplateRef<any>;

子组件HTML

<ng-template #defaultQuestion>
    some default html...   
</ng-template>
<ng-container *ngTemplateOutlet="questionTemplate ? questionTemplate: defaultQuestion;context:cntxt">
</ng-container>

子组件类/ TS

@Input()questionTemplate: TemplateRef<any>;
constructor() {
    this.cntxt = this;
}
alertx() {
    window.alert('alertx');
}

问题:

我需要在嵌套组件上激活alertx()方法,目前它在父组件上激活。传递ngTemplateOutlet这个上下文不起作用。在这种情况下,如何使传入的模板具有正确的上下文?

答案

请在通过范围时找到Stackblitz代码。

https://stackblitz.com/edit/angular-cpnguf

以上是关于使用ng-template,ng-container和ngTemplateOutlet将输入模板的上下文设置为此的主要内容,如果未能解决你的问题,请参考以下文章

Angule 动态模版 ngTemplateOutlet 的用法

学习笔记20201

NgSwitch - 行为出乎意料,`No provider for NgSwitch` - 出现异常

使用 @ContentChildren() 访问每个 ng-template 名称

querySelector似乎没有在ng-container中找到元素

Angular 'ng-container' 的 React 等价物是啥