[英]Need to use same component more than 2 times with unique values in Angular
Need to create an Angular dashboard with some tiles;需要创建一个带有一些磁贴的 Angular 仪表板; I create a service for tiles but need to pass to the child component from dashboard component.我为磁贴创建了一个服务,但需要从仪表板组件传递给子组件。
<app-tiles class="card overview-box-1 teal" [data]="tileContent"></app-tiles>
Dashboard仪表板
tileContent = {
header: "Text header",
content: "test content"
};
app-child应用子
@Input() data: string;
Now as I have multiple tiles, how can I pass unique data to every tiles?现在我有多个图块,如何将唯一数据传递给每个图块?
Why don't you make the TilesComponent a TileComponent.为什么不将 TilesComponent 设为 TileComponent。 You could have an array that contains all of the data you need and use an *ngFor
to iterate over your list of data.您可以拥有一个包含您需要的所有数据的数组,并使用*ngFor
来遍历您的数据列表。
Your AppTileComponent would have an input called tileContent that took an array of tiles.您的 AppTileComponent 将有一个名为 tileContent 的输入,该输入采用一组图块。
export class AppTileComponent {
@Input() tilesData: TilesData[];
}
That tilesData can be whatever you need to be shown in your tiles. tileData 可以是您需要在图块中显示的任何内容。
tileContent = [{
header: "First Data",
content: "first data content"
},
{
header: "Second Data",
content: "Second Data content"
}]
You could even pass this in from a service and get the same result you're looking for.您甚至可以从服务中传递它并获得您正在寻找的相同结果。
you can use input if you want to send data from parent to child, check click here如果您想将数据从父母发送给孩子,您可以使用输入,请点击此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.