如何在 Angular 2 中将一个组件放入另一个组件中？

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

您不要将组件放入

directives

您在@NgModule声明中

注册

：

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

然后您只需将其放入父级模板 HTML 中即可：

<my-child></my-child>

就是这样。

Answer 2

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

@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

。您可以阅读有关指令结构指令和属性指令的更多信息。

还有另外两种 Angular 指令，已进行了广泛的描述 其他地方：(1) 组件和 (2) 属性指令。

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

---

另外，如果你打开术语表，你会发现组件也是指令。

指令属于以下类别之一：

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

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

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

---

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

指令是一个带有

@Directive

装饰器的类。一个组件是一个 带模板的指令；

@Component

装饰器实际上是

@Directive

装饰器扩展了面向模板的功能。

---

@Component

元数据没有

directives

属性。请参阅组件装饰器。

Answer 3

我认为在 Angular-2 版本中，组件装饰器不支持指令，因此您必须像 @NgModule 中的其他组件一样 注册指令，然后按如下方式导入组件，并从装饰器中删除

directives: [ChildComponent]

。

import {myDirective} from './myDirective';