在角2传递一个组件作为一个'参数'到另一个部件 [英] Passing a component as an 'argument' to another component in Angular 2

问题描述

我是新的网络开发和我刚开始建立一个角2应用程序。在这一点上我试图创造一些CRUD组件/形式，但我发现我的自我复制了很多code的。我不会问什么要避免code复制和设计与Angular2 CRUD应用程序时实现组件重用共同的最佳做法，因为该职位将被锁定。我宁愿集中在一个特定的方面：

I am new to web development and I have just started building an Angular 2 app. At this point I am trying to create some CRUD components/forms but I find my self duplicating a lot of code. I am not going to ask what are the common best practices to avoid code duplication and achieve component reusability when designing CRUD applications with Angular2, because the post will get locked. I will rather focus on one particular aspect:

我有一个CRUD页，有一个列表（它实际上是一个HTML表格）资源和几个按钮，打开创建，读和编辑形式。该列表是在其自身和所述创建/读取/编辑分开的部件的单独部件为好。表中的每一行包括如何呈现一个资源项另一个组件。我将这个＆LT;资源项目＆GT; 组件。但是，我有几个那些CRUD网页，对于不同的资源的每一页。因此，我想是重用列表组件的所有资源。所以，我们要做的第一件事情就是添加输入或属性的列表组件，以控制其标签。到现在为止还挺好。

I have a "CRUD page" that has a list (it is an html table actually) of resources and several buttons that open up "create", "read", and "edit" forms. The list is a separate component on its own and the create/read/edit separate components as well. Each row of the table includes another component which knows how to render a resource item. I will call this <resource-item> component. However, I have several of those "CRUD pages", each page for a different resource. So what I want is to reuse the list component for all the resources. So the first thing to do is to add Inputs or Attributes to the list component in order to control its labels. So far so good.

但对于＆LT;资源项目＆GT; 组件？我的应用程序的每个资源可以有一个完全不同的结构。因此，我将需要不同的资源不同的组件，例如：＆LT;资源-A-项目＆GT; ，＆LT;资源-B-项目＆GT; ，等我如何指定我想使用每次我创建一个列表组件时哪些资源项目的组成部分？

But what about the <resource-item> component? Each resource of my application might have a completely different structure. As a result I will need different components for different resources, e.g.: <resource-a-item>, <resource-b-item>, etc. How can I specify which resource item component I want to use every time I create a list component?

感谢您的时间。

推荐答案

这似乎是内容transclusion一个完美的结合。

This seems to be a perfect fit for content transclusion.

2角带有一个称为组件的 NG-内容，允许你插入外部HTML /组件作为组件的内容。

Angular 2 comes with a component called ng-content that allows you to insert external html/components as the content of your component.

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

You just need to use in the place where you want the content to be displayed in your component.

有关exampe：

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() {

  }
}

和您可以指定内容要从组件父注入是这样的：

And you can specify the content you want injected from the component's parent this way:

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

您可以看到工作的例子这里。

You can see working example here.

在你的情况，你可以让列表行/项目，可以接受一些内容来显示组件。

In your case you can make the list row/item a component that can accept some content to display.

这篇关于在角2传递一个组件作为一个'参数'到另一个部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！