包装或扩展角度材料组件，允许将未知属性传递到子组件

Question

我们正在使用 Angular 5 和材料设计，并使用用于各种功能的辅助方法创建我们自己的组件(即mat-table的动态列生成(。

我想要一种方法将未知属性从我的父组件传递到我的子组件。这在 React 中很容易，例如：

应用类呈现

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

我的数据表呈现

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

这样，如果MatComponent更新了它所采用的属性，MyDataTable就不必更新了。我已经查看了@Input装饰器，但这似乎不利于未知变量。

我想到的一个解决方案是只传入一个对象并通过@Input来解释该对象，但我不喜欢这样，因为我希望角度材料组件文档能够准确反映开发人员应该如何使用我的MyDataTable组件。

我的问题的简短版本：如何将下落不明的属性级数据传递给 Angular 5 中的子组件？

Answer 1

<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>

样品.html

只需传递可能来自父组件或子组件的数据源对象。

数据源 = 数据 ;

希望你明白我的意思，或者你需要一些不同的东西。根据您的问题，动态数据插入到表中必须绑定到控制器部分。就角度而言，如果您的数据源模型由子组件和父组件更新。它在更新发生时呈现数据。

显示父组件和子组件数据的代码 如果可能？ 谢谢

Answer 2

我能想到的用 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。这样，您可以为已知属性设置一些默认值，甚至可以预期一些未知属性。

希望我有任何帮助。