typescript - 将组件作为 'argument' 传递给 Angular 2 中的另一个组件

Question

我是网络开发的新手，我刚刚开始构建 Angular 2 应用程序。在这一点上，我正在尝试创建一些 CRUD 组件/表单，但我发现我自己复制了很多代码。我不会问在使用 Angular2 设计 CRUD 应用程序时，避免代码重复和实现组件可重用性的常见最佳实践是什么，因为帖子会被锁定。我宁愿专注于一个特定方面:

我有一个“CRUD 页面”，它有一个资源列表(它实际上是一个 html 表)和几个打开“创建”、“读取”和“编辑”表单的按钮。该列表本身是一个单独的组件，创建/读取/编辑单独的组件也是如此。表格的每一行都包含另一个知道如何呈现资源项的组件。我将其称为 <resource-item>成分。但是，我有几个这样的“CRUD 页面”，每个页面用于不同的资源。所以我想要的是为所有资源重用列表组件。因此，首先要做的是向列表组件添加 Inputs 或 Attributes 以控制其标签。到目前为止，一切都很好。

但是 <resource-item> 呢？成分？我的应用程序的每个资源可能具有完全不同的结构。因此，我将需要针对不同资源的不同组件，例如:<resource-a-item> , <resource-b-item>等等。如何指定每次创建列表组件时要使用哪个资源项组件？

感谢您的宝贵时间。

Answer 1

这似乎非常适合内容嵌入。

Angular 2 带有一个名为 ng-content 的组件，它允许您插入外部 html/组件作为组件的内容。

你只需要在你想要在你的组件中显示内容的地方使用。

例如:

import {Component} from 'angular2/core'

@Component({
  selector: 'holder',
  providers: [],
  template: `
    <div>
      <h2> Here's the content I got </h2>
      <ng-content></ng-content>
    </div>
  `,
  directives: []
})
export class Holder {
  constructor() {

  }
}

并且您可以通过这种方式指定要从组件的父级注入(inject)的内容:

import {Component} from 'angular2/core';
import {Holder} from './holder';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <holder>
        <div>yeey transcluded content {{name}}</div>
      </holder>
    </div>
  `,
  directives: [Holder]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

您可以查看工作示例 here .

在您的情况下，您可以使列表行/项目成为可以接受要显示的某些内容的组件。