组件内的组件 Angular

Question

当一个组件在另一个组件内部时，它叫什么？喜欢

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

它是如何工作的？

Answer 1

我很确定中间组件不会被渲染。这是一个无效的语法。

但是，您可以创建至少包含 2 个不同组件的递归组件模式，如下所示：

在 "recursion-container" 组件的 html:

<agm-map ....

在 agm-map component.html:

<recursion-container"...

所以你基本上需要一个 middle-layer。

关于基本的组件通信，you can read the documentation

Answer 2

你必须使用ng-content

<ng-content></ng-content>
<ng-content select="agm-marker"></ng-content>

您必须将两个组件声明为：

agm-map.component.ts

@Component({
    selector: 'agm-map',
    template: '<ng-content></ng-content>
            <ng-content select="agm-marker"></ng-content>'
})
export class AgmMapComponent {
  ...
}

agm-marker.component.ts

@Component({
    selector: 'agm-marker',
    template: '<div>Marker</div>'
})
export class AgmMarkerComponent {
  ...
}

但我猜你想将 latitude/longitude 传递给你的子组件，为此你可以阅读有关如何将数据从父组件传递到子组件的文档 here

组件内的组件 Angular

component inside component Angular

ng-template

angular