Вернуть один и тот же HTML в нескольких местах, не повторяя один и тот же компонент выбора угла 2+ - PullRequest
Новая
       15

Вернуть один и тот же HTML в нескольких местах, не повторяя один и тот же компонент выбора угла 2+

1 голос
/ 23 мая 2019

У меня есть сценарий, и я думаю, что многие из угловых разработчиков столкнутся с этим сценарием.У меня есть несколько плиток, когда данные доступны, тогда они показывают данные.Но когда данные недоступны, тогда мы должны показать общее сообщение, подобное этому.

enter image description here

Эти плитки не генерируются с использованием * ngfor.Теперь, если я создам для этого общий компонент (в котором есть HTML - нет данных), мне придется добавить этот компонентный селектор во все мои плитки.Есть ли лучший способ сделать это?Использование директив (я знаю, директивы не имеют HTML.) Или любые другие концепции, которые мне не хватает.Или повторение общего компонента выбора является единственным решением?

1 Ответ

0 голосов
/ 23 мая 2019

Вы можете сделать это.Создайте массив для плиток и установите данные. 

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 Input для получения входных данных из родительского компонента 

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

@Input() tileData;

Сделайте это в вашем компоненте плитки html 

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

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