在Angular 6中,你可以在ngOnInit
生命周期钩子中使用@Input
的值。以下是一个示例解决方案:
在父组件中,定义一个带有@Input
装饰器的属性,并将其传递给子组件:
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
parentValue = 'Hello from parent';
}
在子组件中,接收父组件传递的输入属性,并在ngOnInit
中使用它:
// 子组件
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
{{ inputValue }}
`
})
export class ChildComponent implements OnInit {
@Input() inputValue: string;
ngOnInit() {
console.log(this.inputValue); // 输出:Hello from parent
}
}
在上面的示例中,ParentComponent
定义了一个名为parentValue
的属性,并将其传递给ChildComponent
的inputValue
属性。在ChildComponent
中,使用@Input
装饰器接收inputValue
属性,并在ngOnInit
生命周期钩子中使用它。
注意:确保在使用@Input
装饰器之前导入Input
和OnInit
这两个类。