Как сделать повторно используемый компонент, который принимает разные данные для каждого использования?

Question

Редактировать: мое решение состояло в том, чтобы переосмыслить то, что я пытался достичь, и вместо того, чтобы пытаться создать компонент, который получает параметры и данные из разных источников и затем вызывается несколько раз в родительском, я создал компонент, который просто использует макет сетки (Material grid), затем он содержит все разметку шаблона и вызовы API и вызывается один раз в родительском. Я думаю, что это проще поддерживать, но его нельзя использовать в другой панели, если я не расширю его и не использую * ngIf в шаблоне.

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

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

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

Я нашел несколько руководств по повторному использованию компонентов, но это не то, что мне нужно. Я рассмотрел использование нескольких *ngIf в шаблоне для проверки и показа / скрытия того, какой набор данных отображается, таким образом, имея один большой компонент с несколькими вариантами, но это кажется грязным и со многими видами использования будет трудно поддерживать.

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

Шаблон компонента многократного использования

<mat-card class="panel">
    <header class="subheader">
      <h2><mat-icon color="primary">{{iconRef}}</mat-icon> {{headerRef}}</h2>
      <hr class="header">
    </header>

    // a table or list of data here, changes for each use. 
    // Will use for example {{ data.activity }} from one endpoint
    // or {{ data2.location }} from some other endpoint

  </mat-card>

Используется в родителях так:

 <app-resusable-dash-one [headerRef]="' Prosjekt'" [iconRef]="'assignment'"></app-resusable-dash-one>

компонент многократного использования .ts:

export class ResusableDashOneComponent implements OnInit {

  @Input() iconRef: string;
  @Input() headerRef: string;

  dataRef: any[] = [];
  @Input() data: 'dataProject' | 'dataTask' = 'dataProject';

  constructor(
    public projectService: ProjectService,
  ) { }

  ngOnInit() {
    this.projectService.getProjects().subscribe( res => {
      // assign res to data. 
  }

Answer 1

Чтобы отобразить или даже сделать его редактируемым, вы должны каким-то образом знать данные.Вопрос в том, насколько ваши входные данные отличаются друг от друга?

Если у вас есть небольшое количество различных объектов, которые вы хотите отобразить, я бы создал подкомпонент для каждого типа объектов.Вы передаете этот объект вашему повторно используемому компоненту, и он отображает правильный подкомпонент (с помощью * ngIf)

Другой вариант заключается в том, что ваш повторно используемый компонент ожидает отображения списка «атрибутов».Атрибут будет представлять одно значение объекта и описание для него.Это может выглядеть так:

objAttrs = [{ value: 'my text', label: 'Content', type: 'string', readonly: 'false' }]

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

Третийвариант в том, что вы используете отражение.Но у меня нет большого опыта работы с ним ни в Javascript, ни в Angular, и я даже не уверен, что это сработает с угловым связыванием - вам нужно зайти в Google, чтобы узнать, как это работает или вообще может работать.

Answer 2

вы ищете ng-content?

например,

//In App.component
name = 'Angular';
data1=[{id:1,name:'one'},{id:2,name:'two'}]
data2=[{key:'a',text:'I am a'},{key:'b',text:'I am b'}]

//And 
<hello name="{{ name }}" >
    <div *ngFor="let item of data1">
      {{item.id}} {{item.name}}
    </div>
</hello>
<hr/>
<hello name="{{ name }}" >
    <div *ngFor="let item of data2">
      {{item.key}} {{item.text}}
    </div>
</hello>

где привет как

<h1>Hello {{name}}!</h1>
<ng-content></ng-content>