ViewChild 在 angular 13 中未定义
ViewChild is undefined in angular 13
我正在尝试从 parent 调用 child 组件的视图 child,但在控制台中未定义。
看图也看stack blaze同
https://stackblitz.com/edit/angular-ivy-k4m2hp?file=src%2Fapp%2Fhello.component.ts
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { TestChildComponent } from './test-child/test-child.component';
@Component({
selector: 'hello',
template: `<h1>this is Hello component {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
@Input() name: string;
@ViewChild('TestChildComponent') testChildComponent: TestChildComponent
ngOnInit() {
console.log('calling ngOninit in hello component');
console.log('going to call test child instance this.TestChildComponent.ngOninit')
console.log(this.testChildComponent);
}
}
请帮助获取 child 组件
this.testChildComponent
这样我就可以从 parent 调用 child 的 ngOnInit。
this.testChildComponent.ngOnInit()
最早可以在ngAfterViewInit()
周期访问ViewChild元素ref。
Angular 文档说我们应该在 ngAfterViewInit 中使用由 ViewChild 注入的 child 组件。但有时你甚至无法在 ngAfterViewInit 中获取它。原因是 child 组件在 AfterViewInit 挂钩运行时尚未创建。对于这种情况,您将不得不等待更多时间(使用 setTimeout
会起作用,但这是个坏主意)。其他选择是让 child 向 parent 发送一些东西,让它知道 child 已经被渲染,然后 parent 可以查询它。
但是你的情况是兄弟 HelloComponent
想查询兄弟 TestChildComponent
它不能那样做。 TestChildComponent
只是不在 HelloComponent
的范围内。最简单的解决方案是从 parent AppComponent
.
查询 TestChildComponent
您还应该添加 #TestChildComponent
以访问参考文献。
<app-test-child #TestChildComponent childname="{{ name }}"></app-test-child>
工作示例:https://stackblitz.com/edit/angular-ivy-j5ceat?file=src%2Fapp%2Fapp.component.html
如果您设置 viewChild { static: true } 您将能够在 ngOnInit 中访问它
但在您的示例中,问题是由于 testChildComponent 是 app.component 而不是 hello.component
的子组件
<app-test-child childname="{{ name }}" #test></app-test-child>
app.component.ts
import { Component, VERSION, ViewChild } from '@angular/core';
import { TestChildComponent } from './test-child/test-child.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'this is from app compoenent';
@ViewChild('test', { static: true }) testChildComponent: TestChildComponent;
ngOnInit() {
console.log('calling ngOninit in app component');
console.log(this.testChildComponent);
}
}
如果您想从 hello.component 访问 testChildComponent,您必须将组件作为样本的输入发送给它
遵循访问 testChildComponent 的工作示例
https://stackblitz.com/edit/angular-ivy-tvwukg?file=src%2Fapp%2Fapp.component.html
我正在尝试从 parent 调用 child 组件的视图 child,但在控制台中未定义。
看图也看stack blaze同
https://stackblitz.com/edit/angular-ivy-k4m2hp?file=src%2Fapp%2Fhello.component.ts
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { TestChildComponent } from './test-child/test-child.component';
@Component({
selector: 'hello',
template: `<h1>this is Hello component {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
@Input() name: string;
@ViewChild('TestChildComponent') testChildComponent: TestChildComponent
ngOnInit() {
console.log('calling ngOninit in hello component');
console.log('going to call test child instance this.TestChildComponent.ngOninit')
console.log(this.testChildComponent);
}
}
请帮助获取 child 组件
this.testChildComponent
这样我就可以从 parent 调用 child 的 ngOnInit。
this.testChildComponent.ngOnInit()
最早可以在ngAfterViewInit()
周期访问ViewChild元素ref。
Angular 文档说我们应该在 ngAfterViewInit 中使用由 ViewChild 注入的 child 组件。但有时你甚至无法在 ngAfterViewInit 中获取它。原因是 child 组件在 AfterViewInit 挂钩运行时尚未创建。对于这种情况,您将不得不等待更多时间(使用 setTimeout
会起作用,但这是个坏主意)。其他选择是让 child 向 parent 发送一些东西,让它知道 child 已经被渲染,然后 parent 可以查询它。
但是你的情况是兄弟 HelloComponent
想查询兄弟 TestChildComponent
它不能那样做。 TestChildComponent
只是不在 HelloComponent
的范围内。最简单的解决方案是从 parent AppComponent
.
TestChildComponent
您还应该添加 #TestChildComponent
以访问参考文献。
<app-test-child #TestChildComponent childname="{{ name }}"></app-test-child>
工作示例:https://stackblitz.com/edit/angular-ivy-j5ceat?file=src%2Fapp%2Fapp.component.html
如果您设置 viewChild { static: true } 您将能够在 ngOnInit 中访问它
但在您的示例中,问题是由于 testChildComponent 是 app.component 而不是 hello.component
的子组件<app-test-child childname="{{ name }}" #test></app-test-child>
app.component.ts
import { Component, VERSION, ViewChild } from '@angular/core';
import { TestChildComponent } from './test-child/test-child.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'this is from app compoenent';
@ViewChild('test', { static: true }) testChildComponent: TestChildComponent;
ngOnInit() {
console.log('calling ngOninit in app component');
console.log(this.testChildComponent);
}
}
如果您想从 hello.component 访问 testChildComponent,您必须将组件作为样本的输入发送给它
遵循访问 testChildComponent 的工作示例
https://stackblitz.com/edit/angular-ivy-tvwukg?file=src%2Fapp%2Fapp.component.html