Angular: 如何访问 ng-template 中的引用变量

Question

有没有办法访问在 ng-template 元素中声明的#interface？

我必须将

因为我需要使用 *ngTemplateOutlet。

由于找不到解决方案，我必须添加另一个

如果您知道其他解决方法，我们将不胜感激。谢谢

 //  parent.html
 <button type="button" (click)="interface.apply()"></button>

 <ng-template>
    <interface-settings #interface></interface-settings>
 <ng-template>

 //child.ts (interface-settings.ts)

apply() {
   console.log("apply");
 }

Answer 1

ng-template 被 Angular 用于模板 - 这意味着它不会在 DOM 中呈现，除非某些条件告诉 Angular 在实际的 [=48] 中使用它=].

因此，当您的组件“interface-setting”位于 ng-template 内时 - 您的应用程序不会 accessible/known 除非：

应用了 ng-template 条件并且
您的宿主（父）组件引用了它：

例如，类似于你的例子：

<button type="button" (click)="hello.sayHello()">Method Inside Hello</button>

<ng-template>
  <hello #hello></hello>
<ng-template>

由于不满足上述 2 个条件，因此上述方法本身不起作用。要修复您需要使用 ViewChild 来获取对 hello 组件的引用。像这样：

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('hello') hello;

}

然后您需要确保使用 ng-template（任何触发 ng-template 的内容都将放置在您的应用的 DOM 中）：

<ng-template [ngIf]="true">
  <hello #hello></hello>
<ng-template>

现在对子组件内部方法的引用将起作用：

https://stackblitz.com/edit/angular-ivy-hnmw17?file=src/app/app.component.html

您可以阅读更多 Angular 的结构指令在幕后如何使用 ng-template：https://angular.io/guide/structural-directives

Angular: 如何访问 ng-template 中的引用变量

Angular: how do I access the reference variable which is in a ng-template

parent-child

angular-template

angular-template-variable

angular7

angular8