将组件作为"参数"传递给Angular 2中的另一个组件

Question

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

我有一个"CRUD页面",它有一个列表(实际上是一个html表)的资源和几个打开"创建","读取"和"编辑"表单的按钮.该列表本身是一个单独的组件,创建/读取/编辑单独的组件也是如此.表的每一行包括另一个知道如何呈现资源项的组件.我将称之为这个<resource-item>组件.但是,我有几个"CRUD页面",每个页面用于不同的资源.所以我想要的是为所有资源重用列表组件.因此,首先要做的是将输入或属性添加到列表组件以控制其标签.到现在为止还挺好.

但那个<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() {

  }
}

您可以通过以下方式指定要从组件父级注入的内容:

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

你可以在这里看到工作示例.

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

Answer 2

如果不同的列表是固定的，你可以使用 ngSwitch （Angular2 中的 ng-switchresource-x-item> ） 。您还可以使用路由动态添加组件。如果上述内容不适用于您的用例，您可以使用 DynamicComponentLoader`（How to use angular2 DynamicComponentLoader in ES6?）