我是网络开发的新手,我刚刚开始构建 Angular 2 应用程序。在这一点上,我正在尝试创建一些 CRUD 组件/表单,但我发现我自己复制了很多代码。我不会问在使用 Angular2 设计 CRUD 应用程序时,避免代码重复和实现组件可重用性的常见最佳实践是什么,因为帖子会被锁定。我宁愿专注于一个特定方面:
我有一个“CRUD 页面”,它有一个资源列表(它实际上是一个 html 表)和几个打开“创建”、“读取”和“编辑”表单的按钮。该列表本身是一个单独的组件,创建/读取/编辑单独的组件也是如此。表格的每一行都包含另一个知道如何呈现资源项的组件。我将其称为 <resource-item>
成分。但是,我有几个这样的“CRUD 页面”,每个页面用于不同的资源。所以我想要的是为所有资源重用列表组件。因此,首先要做的是向列表组件添加 Inputs 或 Attributes 以控制其标签。到目前为止,一切都很好。
但是 <resource-item>
呢?成分?我的应用程序的每个资源可能具有完全不同的结构。因此,我将需要针对不同资源的不同组件,例如:<resource-a-item>
, <resource-b-item>
等等。如何指定每次创建列表组件时要使用哪个资源项组件?
感谢您的宝贵时间。
最佳答案
这似乎非常适合内容嵌入。
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 .
在您的情况下,您可以使列表行/项目成为可以接受要显示的某些内容的组件。
关于typescript - 将组件作为 'argument' 传递给 Angular 2 中的另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34575897/