Обернуть или расширить компонент углового материала, позволяя передавать неизвестные атрибуты дочернему компоненту - PullRequest
Новая
       15

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

0 голосов
/ 14 мая 2018

Мы используем Angular 5 и проектирование материалов и создаем наши собственные компоненты с вспомогательными методами для различных функций (например, динамическая генерация столбцов для mat-table).

Я бы хотел передать неизвестные атрибуты измой родительский компонент на мой дочерний компонент.Это легко сделать в React, например:

Визуализация класса приложения 

<MyDatatable knownVar="1" otherKnownVar="2" unknownButKnownToChildVar="3" />

Визуализация MyDataTable 

<MatComponent {...this.props} />

Таким образом, если MatComponent когда-либо обновит атрибуты, которые он принимает, MyDataTable обновлять не нужно.Я посмотрел на декоратор @Input, но это, похоже, не способствует неизвестным переменным.

Одно из решений, о котором я подумал, это просто передать объект и учесть этот объект через @Input, но мне это не нравится, потому что я хотел бы, чтобы документация компонента углового материала точно отражала, какразработчик должен использовать my MyDataTable компонент.

Краткая версия моего вопроса: Как передать неучтенные данные уровня атрибута дочернему компоненту в Angular 5?

Ответы [ 2 ]

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

Единственный способ, с помощью которого я могу думать о том, что вы хотите с декоратором ввода, который обеспечивает Angular, - это передать JS-объект (любой) во входной компонент и в зависимости от свойств выполнить требуемый код.,Пример:

my-component.component.ts 

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  @Input() data: any;
  constructor() { }
  ngOnInit() { }
}

app.component.html 

<my-component [data]="{data: 2, extraData: 3}"></my-component>

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

Еще одна крутая вещь, которую вы также можете сделать, - внутри вашего компонента вы можете иметь некоторые значения по умолчанию, а также ожидать еще больше.Как пример здесь:

app.component.html 

<my-component [data]="{name: 'John', surname: 'Doe'}"></my-component>

my-component.component.ts 

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  @Input() data: any;
  constructor() { }
  ngOnInit() {
    this.data = {
      name: "John",
      surname: "Doe",
      origin: "UK",
      ...this.data
    }
  }
}

my-component.component.html 

<div *ngIf="data.phone">
  Phone Number: {{ data.phone }}
</div>

Или даже создайте Object.keys (this.data) и зациклите данныеСвойства и распечатать правильный HTML.Таким образом, вы можете иметь некоторые значения по умолчанию для известных свойств и даже ожидать еще несколько неизвестных свойств.

Надеюсь, я вам помог.

0 голосов
/ 17 мая 2018 
<div class="example-container mat-elevation-z8">
      <table mat-table #table [dataSource]="dataSource">

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!--  Column -->
        <ng-container matColumnDef="column">
          <th mat-header-cell *matHeaderCellDef> column </th>
          <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

Sample.html

просто передают объект источника данных, который может исходить либо от родительского, либо от дочернего компонента.

dataSource = DATA;

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

Показатькод для данных ваших родительских и дочерних компонентов Если возможно?Спасибо

...