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

Posted 2023-02-22

【中文标题】如何将一个组件放入Angular2中的另一个组件中？

【英文标题】：How to put a component inside another component in Angular2?

【发布时间】：2017-09-15 11:50:55

【问题描述】：

我是 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 对我说，组件装饰器中不存在“指令”属性。我该如何解决这个问题？

【参考方案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。

【讨论】：

“指令类似于组件，但它们用于属性” 组件是指令，也可以有属性选择器。

你可以在属性中使用指令，这称为属性指令。

【参考方案2】：

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

import myDirective from './myDirective';

【参考方案3】：

你不要在directives中放一个组件

您在@NgModule 声明中注册它：

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

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

就是这样。

【讨论】：

Plnkr 似乎不存在了。

@Royi Namir，我可以在父项内单击后以某种方式添加模板，例如在按钮上吗？没有任何路线？

@TheWandererr 我不明白你的问题。

可以说我有一个名为 parent 的父组件，其选择器为 。 templateUrl 只包含 和子组件选择器：。但我希望只有在我点击按钮后才能加载 app-child。

@TheWandererr 你有两个选择：你可以在app-child 上使用*ngIf 或者你可以注入一个新的组件vs ViewContainerref 然后createComponenet