是的,可以通过使用@Input()
装饰器将数据从父组件传递到Angular元素中。以下是一个示例:
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello-element',
template: 'Hello {{name}}!
'
})
export class HelloElementComponent {
@Input() name: string;
}
@Input()
装饰器接收数据:import { Component, Input } from '@angular/core';
@Component({
selector: 'hello-element',
template: 'Hello {{name}}!
'
})
export class HelloElementComponent {
@Input() name: string;
}
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: ' '
})
export class ParentComponent {
name = 'World';
}
在上述示例中,ParentComponent
组件通过将name
属性绑定到HelloElementComponent
组件的@Input()
装饰器中来将数据传递给Angular元素。现在,HelloElementComponent
组件就可以使用该数据来呈现视图。
此外,确保在父组件中导入和声明Angular元素,如下所示:
@NgModule({
declarations: [
ParentComponent,
HelloElementComponent
],
entryComponents: [
HelloElementComponent
]
})
export class AppModule {
ngDoBootstrap() {}
}