访问ng模板上的内部组件

Question

我在ng模板中有一个组件。访问它以调用方法的最佳方式是什么？我目前遇到了一个问题，它总是未定义或无法用我本来可以用来访问它的正常方法访问

<ng-template #template>
<app-planned-expense-edit-form #editform
(save)="onPlannedItemSave($event)"
(isHidden)="onIsHidden($event)">
</app-planned-expense-edit-form>
</ng-template>

Answer 1

我们遇到了一个类似的问题，我们希望选择性地呈现<ng-template>的内容，这意味着ng-template内部的内容不应该总是可见的。

考虑以下示例：

<ng-template #templRef>
<div>
<hello #helloRef name="{{ name }}"></hello>
</div>
... other child comps
</ng-template>

在模板渲染之后，我们想要获得"；Hello Comp"；并调用它的一些方法。

引用helloRef只有在DOM中存在/呈现时才可访问。

当我们在使用templRef启用模板的处理程序中访问helloRef时，它会出现undefined。(Angular仍然需要渲染comp并获取其引用(。

我们需要等待变化检测发生，或者"；强制变化检测"；在显示模板的处理程序中

@ViewChild('templRef') templRef;
@ViewChild('helloRef') helloRef;
constructor(private _cdr: ChangeDetectorRef) {
// other stuff
}
templateShowHandler() {
// logic to show the template
this._cdr.detectChanges();
console.log('templRef', this.templRef);
console.log('helloRef', this.helloRef);
}

---

伪示例

app.component.html

---

<ng-template #templRef>
<div>
<hello #helloRef name="{{ name }}"></hello>
</div>
</ng-template>
<ng-container *ngIf="showTempl">
<ng-container *ngTemplateOutlet="templRef"> </ng-container>
</ng-container>
<button (click)="toggleShow()">ToggelShow</button>

app.component.ts

---

export class AppComponent {
name = 'Angular ' + VERSION.major;
showTempl = false;
@ViewChild('templRef') templRef;
@ViewChild('helloRef') helloRef;
constructor(private _cdr: ChangeDetectorRef) {}
toggleShow() {
this.showTempl = !this.showTempl;
this._cdr.detectChanges();
console.log('templRef', this.templRef);
console.log('helloRef', this.helloRef);
}
}

请在此处检查以上伪代码。

如果手动更改检测不起作用，请尝试在模板显示处理程序下的setTimeout回调下使用引用。ChangeDetectorRefInstance.detectChanges()将对当前及其子comp运行更改检测，setTimeout()将对整个应用程序运行检测

Answer 2

通过，您可以定义只有在您直接或间接明确指示Angular渲染时才会由其渲染的模板内容，从而使您能够完全控制内容的显示方式和时间。我建议使用而不是使用，因为可以在不创建HTML元素的情况下使用来保存指令。

并像这个一样重写你的代码

<ng-template #template [ngIf]="true">
<app-planned-expense-edit-form #editform
(save)="onPlannedItemSave($event)"
(isHidden)="onIsHidden($event)">
</app-planned-expense-edit-form>
</ng-template>

以及如果您想使用{ static: true }配置的@ViewChild访问TS中的这些元素。引入{ static: true }选项是为了支持动态创建嵌入式视图。