在Angular中,父组件可以通过在模板中使用子组件的选择器来调用子组件。以下是一个简单的示例:
在父组件的模板中,使用子组件的选择器来调用子组件:
<app-child></app-child>
在子组件中,可以通过使用@Input装饰器来接收父组件传递的数据:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: '<p>{{ childData }}</p>'
})
export class ChildComponent {
@Input() childData: string;
}
在父组件的类中,可以通过给子组件的属性赋值来传递数据给子组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: '<app-child [childData]="parentData"></app-child>'
})
export class ParentComponent {
parentData: string = 'Hello from parent component';
}
在这个示例中,父组件通过给子组件的childData
属性赋值来传递数据给子组件。子组件通过使用插值表达式{{ childData }}
来显示接收到的数据。
通过这种方式,父组件可以直接调用子组件并传递数据给子组件。