1.使用@Input装饰器将子组件的值传递给父组件。 例如,在子组件中定义一个属性,然后使用@Input将其公开给父组件: 子组件:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent {
@Input() message: string;
}
父组件:
2.使用@ViewChild或@ViewChildren装饰器获取子组件实例并获取其值。 例如,使用ViewChild获取子组件实例: 父组件:
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent) childComponent: ChildComponent;
ngOnInit() {
console.log(this.childComponent.message);
}
}
子组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent {
message = 'Hello from child component';
}
在这个例子中,父组件使用ViewChild装饰器获取子组件实例,并访问子组件的message属性。
注意:@ViewChild只能用于获取单个 child component 实例,如果需要获取多个,需要用到@ViewChildren。另外,@Inject 等也可以代替@ViewChild进行注入。