在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
可以是任何类型的数据,不仅限于字符串。
这样,当父组件渲染时,两个子组件将分别接收到不同的数据并进行显示。