Question

我试图了解两个或更多组件如何以角度相互通信。因此，在创建了Angular项目之后，我刚刚创建了四个新组件，分别名为1、2、3和4。

之后，我试图将这段代码添加到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 works!

而其他组件则根本不渲染。我确信我在角度及其工作方式上遇到了一些严重的问题。您能解释一下为什么不呈现两个，三个和四个数据吗？如果我想让他们工作，该怎么办？

Answer 1

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

请参见stackblitz

根组件模板

type keys struct {
    Key1 key1 `yaml:"key1"`
}

type key1 struct {
    Attr1 string   `yaml:"attr1"`
    Attr2 string   `yaml:"attr2"`
    Attr3 string   `yaml:"attr3"`
    List1 []string `yaml:"list1"`
    List2 []string `yaml:"list2"`
}

组件1的模板

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

组件2的模板

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

组件3的模板

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

组件4的模板

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

Answer 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)

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

2 个答案: