Question

大家早上好！

因此必须创建一个显示许多表的应用程序，这些表看起来都一样（当然，它们的列和内部的对象除外）。

我有一个主表组件，可以概括为：

<master-table>
  <!-- here I define the master table style, pagination, etc etc 
       which is the same everywhere -->
</master-table>

在主表组件TS文件中，我基本上具有与应显示此类表的每个页面相关的选项，例如filterDate，clearSelection等等等，没什么特别的。

重点是，我不想在每个地方重复此代码，因为它不是必需的，所以我的想法是创建几个扩展主表组件的组件。

它对于打字稿值工作正常，但是我对HTML感到困惑。

在我的主表HTML中，我有时希望使用某种占位符，如下所示：

<master-table>
  <standard-for-all-table></standard-for-all-table>

  <!-- insert here child columns -->
</master-table>

在扩展我的主表的组件中，我想到的是：

<!-- child component -->
<master-table></master-table>
<child-column>column definition</child-column>

这样做可以让我仅定义子组件HTML中的列，并且它们将在运行时自动添加到父HTML中。

有什么想法吗？

干杯，谢谢！

Answer 1

基本上，您必须创建主master-table组件和通用列表chid-column组件，并将其插入父html模板结构中。

我已经以更好的理解方式编辑了希望的最后一部分...

然后，您可以构造子组件以包含所需的所有属性，并且感谢*ngIf仅显示从提供者方法（即getClients()，getUsers()，{{ 1}}，还得益于getHouses()装饰器，您可以直接从父级向子级注入此数据，并只需更改数据即可创建所需的许多组件。

所以在您的父母那里，您可以拥有类似的东西

@Input

还有你的孩子

import { Component } from '@angular/core';

import { MY_DATA_FROMP_ROVIDER } from './mydata/provider';

@Component({
  selector: 'master-table',
  template: `
    <ul>
     <child-column *ngFor="let item of items"
      [item]="item">
     </app-hero-child>
    </ul>
  `
})
export class MasterTableComponent {
  items:any

  constructor(public data: MYDATAFROMPROVIDER) {
      this.items = MYDATAFROMPROVIDER.myGetMethod();
}

如果您想更进一步：Component Interaction

Answer 2

本指南摘自官方Here斜页
这是它的live sample

不确定这些链接是否有帮助。
但是我实际上在一个项目中工作，我们希望将Child组件动态加载到Grid（Parent组件）中。
然后，我们可以在网格内部传递具有不同视图的任何组件
猜猜这很接近您的目标。

创建一个主表组件并在angular

2 个答案: