嵌套组件如何在角度 5 或 6 中工作答案

【问题标题】：How does nested component work in angular 5 or 6嵌套组件如何在角度 5 或 6 中工作
【发布时间】：2018-12-21 21:25:23
【问题描述】：

我试图了解两个或多个组件如何以角度相互通信。因此，在创建了一个 Angular 项目后，我只创建了四个新组件，分别命名为一、二、三和四。

之后，我试图在 app.component.html 中添加这段代码

<app-one> 
    <app-two>
        <app-three> </app-three>
    </app-two>
     <app-four> </app-four>
</app-one>

所有组件都具有以下相同的类：

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-one-child',
  templateUrl: './one-child.component.html',
  styleUrls: ['./one-child.component.css']
})
export class OneChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

通过这样做，我认为 One 将成为所有这些组件的父组件，并且所有组件都将呈现。但不幸的是，我只得到了

one works!

而其他组件根本不渲染。我确信我在角度及其工作方式方面遇到了一些严重的问题。你能解释一下为什么它不渲染来自二、三和四的数据吗？如果我想让他们工作我该怎么办？

【问题讨论】：

您的组件类中有哪些代码？
@codeVerses 我已经更新了班级信息。请看一看。我刚刚用 ng g c one 创建了所有组件，依此类推。那里没什么好看的。只有新的组件。

标签： angular angular5 angular6

【解决方案1】：

理想情况下，每个组件模板都负责自己的 html。 IMO 这将是处理此问题的最佳方式。

见stackblitz

根组件的模板

@Component({
  selector: '',
  template: '<app-one></app-one>'
})
export class RootComponent{}

组件 1 的模板

@Component({
  selector: 'app-one',
  template: '<app-two></app-two><app-four></app-four>'
})
export class Child1Component{}

组件 2 的模板

@Component({
  selector: 'app-two',
  template: '<app-three></app-three>'
})
export class Child2Component{}

组件 3 的模板

@Component({
  selector: 'app-three',
  template: '<h1>Hi there from 3</h1>'
})
export class Child3Component{}

组件 4 的模板

@Component({
  selector: 'app-four',
  template: '<h1>Hi there from 4</h1>'
})
export class Child4Component{}

【讨论】：

非常感谢。但是你能告诉我为什么上面的方法不起作用吗？是不是因为组件一类不知道其他类？
@Kazi - 查看我刚刚添加的链接stackblitz。
@Kazi 它不起作用，因为包含。请参阅下面关于 ng-content 的答案。

【解决方案2】：

如果您需要嵌套组件，请在父组件中使用ng-content，例如

@Component({
  selector: 'root',
  template: '<div>I'm root, <ng-content></ng-content></div>'
})
export class RootComponent{}


@Component({
  selector: 'child',
  template: '<root>I'm children in the root</root>'
})
export class ChildComponent{}

等等..

See stack blitz

然后在你的模板中，你可以写：

<child></child>

它将呈现I'm root, I'm children in the root

或者

<root>Hello world!</root>

它将呈现I'm root, Hello World!

Here is a great article about using ng-content (transclusion)

【讨论】：