Angular: как мне получить доступ к ссылочной переменной, которая находится в ng-шаблоне

Question

Есть ли способ получить доступ к #interface, который объявлен внутри элемента ng-template?

Я должен поместить

Потому что мне нужно было бы использовать *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 использовать его в фактической DOM.

Итак, когда у вас есть компонент "настройка интерфейса" внутри ng-template - он недоступен / известен вашему приложению, если:

• было применено условие 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