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

Posted 2023-03-13

技术标签:

【中文标题】嵌套组件如何在角度 5 或 6 中工作【英文标题】：How does nested component work in angular 5 or 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 创建了所有组件，依此类推。那里没什么好看的。只有新的组件。 【参考方案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

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