代码之家 › 专栏 › 技术社区 › Erwol

ng模板中的Angular 6嵌套ViewChild为空

viewchild ng-bootstrap angular javascript

Erwol · 技术社区 · 7 年前

<ng-template #modal let-modal>
    <app-audio #audio></app-audio>
</ng-template>

这就是逻辑:

@ViewChild('modal')
modal: ElementRef;

@ViewChild('audio')
audio: AudioComponent;

this.modalService.open(this.modal,{size:'lg});

在这之前一切都很好。模态打开并显示音频组件。但是现在,我们要访问组件内部的逻辑,在执行以下操作时:

this.audio.somePublicComponentFunction()

You can see the issue here: stackblitz.com/edit/angular-ofmpju

2 回复 | 直到 7 年前

Rahul 7 年前

您可以在不使用reference变量的情况下读取子组件,如下所示

@ViewChild(AudioComponent)
audio: AudioComponent;

这将为您提供子组件的实例—您可以在其中访问该方法

this.audio.someComponentFunction()

<ng-template #modal let-modal>
    <app-audio></app-audio>
</ng-template>

这将解决你的问题,我认为-快乐的编码

更新:

我刚刚添加了一个属性 getter setter set 价值

@Input()
  get triggerFunction(): boolean {
    return this.runFuntion;
  }

  set triggerFunction(value: boolean) {
    this.runFuntion = value;
    this.someFunction();
  }

<ng-template> 最后,模型模板将如下所述:

<ng-template #modal let-modal>
  <app-audio [triggerFunction]="true"></app-audio>
</ng-template>

希望这能暂时解决问题-谢谢

Amit Chigadani 7 年前

你可以调用这个方法 audio.someFunction()

<ng-template #modal let-modal>
  <div style="background-color: red;"> 
  <h1>Modal header</h1>
  <app-audio #audio></app-audio>
  <!-- on click, call audio comp method someFunction() using its reference --> 
  <button (click)="audio.someFunction()">Operate with audio from inside modal</button>
  </div>
</ng-template>

不需要 @ViewChild

分叉的 demo

Sander Oosterwijk 7 年前

// mycomponent.ts => component that needs to be accessed 
import { Component, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './mycomponent.html'
})
export class MyComponent implements AfterViewInit {
   @Output() initialized: EventEmitter<MyComponent> = new EventEmitter<MyComponent>();

   ngAfterViewInit(): void {
        this.initialized.emit(this);
   }

   reload(): void {
        // Do something
   }
}


// somecomponent.html => component with <ng-template> holding MyComponent

<ng-template>
    <div class="btn-group ml-2">
      <my-component (initialized)="onMyComponentInitialized($event)"></my-component>
    </div>
</ng-template>


// somecomponent.ts => component with <ng-template> holding MyComponent
import { Component, OnDestroy } from '@angular/core';
import { MyComponent } from '../../my-component';

@Component({
    selector: 'some-component',
    templateUrl: './some-component.html'
})
export class SomeComponent implements OnDestroy {
    private _myComponent: MyComponent = null;

    onMyComponentInitialized(component: MyComponent) {
        this._myComponent = component;
    }

    someOtherMethod() {
        if (this._myComponent) {
            // Call some method on the component
            this._myComponent.reload();
        }
    }

    ngOnDestroy() {
        this._myComponent = null;
    }
}