Angular 2+: использовать компонент как вход в другой компонент

Question

Как я могу использовать компонент в качестве входных данных для другого компонента в Angular?

Например:

Я хочу компонент таблицы Bulid AppTableComponent:

<app-table [dataSource]="dataSource" [columns]="columns">
  <ng-container tableColumnDef="actions">
    <a routerLink="/model/edit/{{item.id}}" routerLinkActive="active">Edit</a>
    <a routerLink="/model/delete/{{item.id}}" routerLinkActive="active">Delete</a>
  </ng-container>
  <ng-container tableColumnDef="isActive">
    <div [ngClass]="{cercl:true, 'is-active':item.is_active}">&nbsp;</div>
  </ng-container>
</app-table>

dataSource - это сумма данных массива, подобная Model[] или Person[] или Car[]. columns - это строковый массив, подобный ['id', 'isActive', 'name', 'actions']. Он должен содержать строки с именами источников данных или имена дополнительных столбцов.

Я знаю, как я могу использовать ng-content, но это не случайный случай. Разница в том, что я должен использовать части контента в нескольких местах. Возможно, мне стоит использовать ng-contet, но я чего-то не знаю.

Я уверен, что моя цель достижима, потому что таблица угловых материалов работает так:

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="position"></ng-container>
    <ng-container matColumnDef="weight"></ng-container>
</mat-table>

Пожалуйста, не предлагайте мне использовать компонент таблицы угловых материалов. Мне не нужен стол. Я просто хочу узнать что-то новое.

Я буду рад любой информации или статье по теме!

Answer 1

Вы можете использовать @ContentChild('tableHeader') header: TemplateRef<any>; Вы можете использовать ContentChild, чтобы получить первый элемент или директиву, соответствующую селектору, из содержимого DOM.

Если DOM содержимого изменяется и новый селектор соответствует селектору, свойство будет обновлено.

Ваш ребенок component.html читается как

 <ng-template [ngTemplateOutlet]="header"></ng-template>
 <ng-template [ngTemplateOutlet]="body"></ng-template>

Где [ngTemplateOutlet] прочитает значение свойства и вставит содержимое в указанный шаблон

Наконец, когда вы ссылаетесь на контент из родительского компонента, он размещается с шаблоном, упомянутым выше

Способ передачи содержимого от родителя к потомку

<compoent-selector>
     <ng-template #tableHeader></ng-template>
     <ng-template #body></ng-template>
</component-selector>

Любой контент внутри этого <ng-template> будет размещен внутри дочернего компонента

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

нажмите здесь для справки

Answer 2

Если вы хотите управлять шаблоном на потребительской стороне, вам нужно использовать угловое встроенное представление (ng-template). И это то, что материал использует в своей реализации таблицы.

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

Можно сказать, что нет встроенного представления, но давайте рассмотрим расширенную версию шаблона выше:

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="position">
    <ng-template matHeaderCellDef>
      <th mat-header-cell> No. </th>
    </ng-template>
    <ng-template matCellDef let-element="$implicit">
      <td mat-cell> {{element.position}} </td>
    </ng-template>
  </ng-container>

мы можем заметить <ng-template matHeaderCellDef> здесь, которое можно получить с помощью ContentChild.

Команда Angular Material создает специальные директивы для таких шаблонов https://github.com/angular/material2/blob/f2c7205d6608d36a2016d90090be2a78d4f3233e/src/lib/table/cell.ts#L32, в которых хранятся ссылки на встроенные шаблоны https://github.com/angular/material2/blob/676ce3b285718d2ee19ad6ae5702917566167641/src/cdk/table/cell.ts#L34

Компонент таблицы материалов имеет шаблон типа:

<ng-container headerRowOutlet></ng-container>
<ng-container rowOutlet></ng-container>
<ng-container footerRowOutlet></ng-container>

Существуют также директивы-помощники, такие как:

@Directive({selector: '[headerRowOutlet]'})
export class HeaderRowOutlet implements RowOutlet {
  constructor(public viewContainer: ViewContainerRef,
              public elementRef: ElementRef) { }
}

Так что мы можем использовать API низкого уровня для создания элементов на основе встроенного шаблона, например, ViewContainerRef.createEmbeddedView(templateRef), но простую реализацию можно найти здесь:

• Как визуализировать несколько ng-содержимого внутри цикла ngFor, используя Angular 4?