Невозможно получить доступ к переменной дочернего компонента, который определен внутри ng-template - PullRequest
Новая
       101

Невозможно получить доступ к переменной дочернего компонента, который определен внутри ng-template

0 голосов
/ 13 июля 2020

Мне не удалось получить доступ к интерфейсу # hosts / #, потому что он определяется внутри ng-template.

Если я поставлю вне ng-template, тогда он работает.

Но я все же хочу поместить его в ng-template, чтобы ngTemplateOutlet мог читать компонент.

Есть ли альтернативный способ, которым я мог бы сделать ? 

 '  // parent.html

    <a *ngFor="let navItem of navItems"></a>
    <ng-container *ngTemplateOutlet="selected?.template"></ng-container>
    <button [disabled]="selected?.name.applyDisabled"></button>

    <ng-template #hostsTemplate>
        <hosts #hosts></hosts> // having problem access the applyDisabled variable inside host -settings component
    </ng-template>

    <ng-template #interfaceTemplate>
       <interface #interface></interface>// having problem access the variable inside interface-settings component
    </ng-template>

  // parent.ts
  @ViewChild('hostsTemplate', {static: false})
   public hostsTemplate: TemplateRef<any>;

   @ViewChild('interfaceTemplate', {static: false})
   public interfaceTemplate: TemplateRef<any>;

   ngAfterViewInit() {
      this.navItems.push(
         { name: 'Interface', template: this.interfaceTemplate },
         { name: 'Hosts', template: this.hostsTemplate },
         { ...},
         { ...},
      );
      this.selected = this.navItems[0];
    }

 // hosts component.ts

 @Component({
   selector: 'hosts',
   ..
 })

 export class HostsComponent extends AutoUnsubscribe {
    public applyDisabled = true;
 }

 // interface component.ts
 @Component({
   selector: 'interface',
   ..
 })

 export class InterfaceComponent extends AutoUnsubscribe {
    public applyDisabled = true;
 }
...