在Angular中,从子组件获取模型最简单的方法是使用@ViewChild装饰器。这将允许父组件使用子组件的属性和方法。以下是示例代码:
子组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: '{{ value }}',
})
export class ChildComponent {
value = 'Hello from child';
}
父组件:
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-parent',
template: ' ',
})
export class ParentComponent {
@ViewChild(ChildComponent)
childComponent: ChildComponent;
ngAfterViewInit() {
console.log(this.childComponent.value);
}
}
在此示例中,父组件使用@ViewChild装饰器来声明要获取的子组件(ChildComponent)。然后,它可以在ngAfterViewInit钩子中访问该组件,并使用它的属性(value)。
请注意,@ViewChild仅适用于单个子组件。如果您想要从多个子组件中获取模型,可以使用@ViewChildren装饰器,它将返回一个QueryList,其中包含所有匹配的子组件实例。