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

Question

我是 Angular 的新手，我仍在努力理解它。我已经学习了 Microsoft Virtual Academy 上的课程，它很棒，但我发现他们所说的和我的代码的行为方式之间存在一点差异！具体来说，我试过 "put a component inside another component" 这样的：

@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

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

@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 and Attribute Directives.

There are two other kinds of Angular directives, described extensively elsewhere: (1) components and (2) attribute directives.

A component manages a region of HTML in the manner of a native HTML element. Technically it's a directive with a template.

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

Directives fall into one of the following categories:

Components combine application logic with an HTML template to render application views. Components are usually represented as HTML elements. They are the building blocks of an Angular application.

Attribute directives can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented as HTML attributes, hence the name.

Structural directives are responsible for shaping or reshaping HTML layout, typically by adding, removing, or manipulating elements and their children.

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

A directive is a class with a @Directive decorator. A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.

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

Answer 2

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

import {myDirective} from './myDirective';

Answer 3

你不要把一个组件放在directives

您在@NgModule声明中注册它：

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

然后您只需将它放在父模板中 HTML 为：<my-child></my-child>

就是这样。

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

How to put a component inside another component in Angular2?

angular2-directives

angular

Directives fall into one of the following categories: