Angular多个相同的子组件 - 传递不同的数据_编程开发

Angular多个相同的子组件 - 传递不同的数据

创始人

2024-10-24 16:32:37

0次

在Angular中，可以通过使用输入属性来传递不同的数据给多个相同的子组件。下面是一个代码示例：

在父组件中，定义一个输入属性来接收传递给子组件的数据：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
    
  `
})
export class ParentComponent {
  data1 = 'Data 1';
  data2 = 'Data 2';
}

在子组件中，定义一个输入属性来接收父组件传递的数据：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    {{ data }}
  `
})
export class ChildComponent {
  @Input() data: string;
}

在父组件的模板中，通过使用方括号语法将父组件的数据绑定到子组件的输入属性上。这样，每个子组件都可以接收到不同的数据。

请注意，父组件中的data1和data2可以是任何类型的数据，不仅限于字符串。

这样，当父组件渲染时，两个子组件将分别接收到不同的数据并进行显示。

上一篇：Angular多个下标在初始化时进行相同的API调用会导致重复加载。

下一篇：Angular多个组件渲染视图问题

Angular多个相同的子组件 - 传递不同的数据

相关内容

热门资讯