[英]Angular 6 nested ViewChild inside ng-template is null
我们在应用程序中使用模式( ng-bootstrap的模式)。 该模态如下所示:
<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()
碰巧this.audio为null。 我已经尝试过让孩子使用角度的变化检测器,但是无法找到一种将this.audio与实际组件正确链接的方法。 有任何想法吗? 非常感谢。
您可以像这样不使用refrence变量读取子组件
@ViewChild(AudioComponent)
audio: AudioComponent;
这将为您提供子组件的实例-您可以在其中访问方法
this.audio.someComponentFunction()
您的html
<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>
希望这现在可以解决问题-谢谢
您可以从模板本身调用方法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
属性。 这应该为您解决问题。
分叉演示
对我来说,所有这些解决方案都行不通,我仍然想在第三方ng-template中访问自己的组件。 这是我的“解决方案”。 我不认为这是最佳实践,而是一个拼命的解决方案,可以得到我想要的;-)当然,它仅适用于您自己的组件。
// 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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.