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

Question

我是Angular的新手,我还在努力理解它.我已经按照微软虚拟学院的课程进行了测试,这很棒,但我发现他们所说的内容与我的代码行为之间存在一些差异!具体来说,我试图"将一个组件放在另一个组件中",如下所示:

@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告诉我,组件装饰器中不存在'directives'属性.我怎么解决这个问题？

Answer 1

你没有放入组件directives

您在声明中注册它@NgModule:

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

然后你只需将它放在Parent的模板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属性。请参阅组件装饰器。