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

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

Я должен поместить ‹interface-settings внутрь ‹ng-template.

Потому что мне нужно будет использовать *ngTemplateOutlet.

Поскольку я не смог найти решение для этого, я должен добавить еще один ‹interface-settings #interface и не объявлять его внутри ng-template.

был бы признателен, если бы вы знали другой обходной путь. Спасибо

 //  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");
 }

angular8 parent-child angular7 angular-template angular-template-variable
person user21    schedule 07.08.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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, чтобы получить ссылку на компонент приветствия. Вот так:

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

person Sergey Rudenko    schedule 11.08.2020