在多个位置返回相同的html，而无需重复相同的组件选择器angular 2+

Question

我有一个场景，我认为，许多有角度的开发人员都会面对这种场景。 可用数据时，我有多个图块，然后它们显示了数据。但是，当数据不可用时，我们必须显示这样的共同信息。

这些图块不是使用* ngfor生成的。现在，如果我为此创建一个公共组件（具有HTML-无可用数据），则必须在所有图块中添加此组件选择器。有什么更好的方法吗？ 使用指令（我知道，指令没有HTML。） 或其他我所缺少的概念。还是重复通用组件选择器是唯一的解决方案？

Answer 1

您可以执行此操作。 为图块创建一个数组并设置数据。

tiles: Array<any> = [
    {
        title: 'Channel',
        data: []
    },
    {
        title: 'Campaign',
        data: []
    },
    {
        title: 'Region',
        data: []
    },
    {
        title: 'Product',
        data: []
    },
];

使用*ngFor在HTML内显示图块

<div *ngFor="let tile of tiles">
    <tile-component [tileData]="tile"><tile-component>
</div>

您需要执行以下操作：

导入输入以从父组件获取输入数据

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

@Input() tileData;

在您的tile组件html中执行此操作

<h4>{{tileData['title']}}<h4>

<p *ngIf="tileData['data'].length == 0">No data available</p>