Question

我有一个可定制的组件，该组件使用ng容器来显示默认模板或传入的模板。问题是我需要传入的模板将其上下文设置为其嵌套的组件。我尝试将 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传递 this 的上下文无效。在这种情况下，如何使传入的模板具有正确的上下文？

Answer 1

请在传递范围内找到Stackblitz代码。

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

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

1 个答案: