Question

我们正在使用Angular 5和材质设计，并使用辅助方法为各种函数创建自己的组件（即mat-table的动态列生成）。

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

App class render

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

MyDataTable呈现

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

Sample.html

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

dataSource = DATA;

希望你明白我的观点，或者你需要不同的东西。根据您的问题，动态数据插入到表中必须绑定到控制器部分。如果您的数据源模型由子组件以及父组件更新，则以角度为单位。它会在更新时呈现数据。

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

Answer 2

我可以想到使用Angular提供的输入装饰器做你想要的一种方法是将 JS对象（任意）传递给组件输入，并根据属性执行所需的码。例如：

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

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

我-component.component.html

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

甚至可以制作某种 Object.keys（this.data）并循环数据属性并打印正确的html。这样，您可以为已知属性设置一些默认值，甚至可以期待更多未知属性。

希望我能得到任何帮助。

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

2 个答案: