angular父组件怎么调用子组件-开发者知识库平台

angular父组件怎么调用子组件

angular

1348

2023/10/22 16:59:19

栏目: 编程语言

在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 }}来显示接收到的数据。

通过这种方式，父组件可以直接调用子组件并传递数据给子组件。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

angular父组件怎么调用子组件

最新知识库

相关标签