组件内部的组件Angular

Question

当一个组件位于另一个组件内部时，该怎么称呼？ 像

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

以及它如何运作？

Answer 1

您必须使用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 {
  ...
}

但是我想您想将纬度/经度传递给子组件，因为您可以在此处阅读有关如何将数据从父组件传递到子组件的文档

Answer 2

我相当确定，不会渲染中间组件。 这是无效的语法。

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

在“递归容器”组件的html中：

<agm-map ....

在agm-map component.html中：

<recursion-container"...

因此，您基本上需要一个中间层。

关于基本组件通信， 您可以阅读文档