如何将一个组件放入Angular2中的另一个组件中？

Question

我是 Angular 的新手，我仍在努力理解它。我已经学习了 Microsoft Virtual Academy 上的课程，它很棒，但我发现他们所说的与我的代码行为方式之间存在一些差异！具体来说，我尝试像这样“将一个组件放入另一个组件中”：

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

这是他们在课程中制作的相同示例，但在我的代码中不起作用！特别是 VisualStudio 对我说，组件装饰器中不存在“指令”属性。我该如何解决这个问题？

Answer 1

如果您删除指令属性，它应该可以工作。

@Component({
    selector: 'parent',
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

---

指令类似于组件，但它们用于属性中。他们还有一个声明符@Directive。您可以阅读有关指令 Structural Directives 和 Attribute Directives 的更多信息。

还有另外两种 Angular 指令，详细描述 其他地方：(1) 组件和 (2) 属性指令。

组件以原生 HTML 的方式管理 HTML 区域 元素。从技术上讲，它是一个带有模板的指令。

---

此外，如果您打开词汇表，您会发现组件也是指令。

Directives 属于以下类别之一：

• Components 将应用程序逻辑与 HTML 模板结合以呈现应用程序视图。组件通常表示为 HTML 元素。它们是 Angular 应用程序的构建块。

• Attribute directives 可以监听和修改其他 HTML 元素、属性、属性和组件的行为。他们是 通常表示为 HTML 属性，因此得名。

• Structural directives 负责塑造或重塑 HTML 布局，通常通过添加、删除或操作元素 和他们的孩子。

---

组件有模板的区别。请参阅Angular Architecture 概述。

指令是一个带有@Directive 装饰器的类。一个组件是一个 带有模板的指令； @Component 装饰器实际上是一个 @Directive 装饰器扩展了面向模板的功能。

---

@Component 元数据没有 directives 属性。见Component decorator。

Answer 2

我认为组件装饰器不支持您的 Angular-2 版本指令，因此您必须 注册指令 与 @NgModule 中的其他组件相同，然后导入组件如下，并从装饰器中删除directives: [ChildComponent]。

import {myDirective} from './myDirective';

Answer 3

你不要在directives中放一个组件

您在@NgModule 声明中注册它：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

然后您只需将其放入父模板 HTML 中：<my-child></my-child>

就是这样。