Angular-儿童组成部分中的访问父母变量

Question

我有四个组件，我需要将数据从父母传递给孩子。map.html模板中的结构看起来喜欢以下内容：

<map-builder [width]="width">
    <layer [name]="'markerLayer'">        
        <marker [lat]="8.5" [lng]="55.5"></marker>
        <marker [lat]="54" [lng]="8.5"></marker>
    </layer>
    <layer [name]="'heatmapLayer'">
        <heatmap></heatmap>
    </layer>
</map-builder>

在LayerComponent中，我有变量layer和source。在ngOnInit()中，我设置了两个值。现在，我需要在嵌套组件（Marker和Heatmap）中访问两个值。我试图将LayerComponent注入constructor()，但无法访问其变量。

感谢您的帮助！

Answer 1

使用Input装饰器，并确保layer和source属性在LayerComponent中公开：

export class MarkerComponent implements OnInit {
    @Input() layer;
    @Input() source;
}
export class HeatMapComponent implements OnInit {
    @Input() layer;
    @Input() source;
}

html：

<map-builder [width]="width">
<layer #lyr [name]="'markerLayer'">        
    <marker [layer]="lyr.layer" [scoure]="lyr.source" [lat]="8.5" [lng]="55.5"></marker>
    <marker [layer]="lyr.layer" [scoure]="lyr.source" [lat]="54" [lng]="8.5"></marker>
</layer>
<layer #lyr2 [name]="'heatmapLayer'">
    <heatmap [layer]="lyr2.layer" [scoure]="lyr2.source" ></heatmap>
</layer>
</map-builder>

或将父母注入孩子的consturctor：

export class HeatMapComponent implements OnInit {
  constructor(private layer : LayerComponent){}
 ngOnInit(){
    //this.layer.source
    //this.layer.layer
   this.layer.onDataChange.subscribe((data)=>{
     console.log(data.layer,data.source)
   })
 }

在您的图层组件中

export class LayerComponent implements OnInit {
layer: any;
source: any;
@Output() onDataChange: EventEmitter<any> = new EventEmitter<any>();
someMethod() {
    // when you change the value emit them 
    this.layer = someValue;
    this.source = someValue;
    this.onDataChange.emit({ layer: this.layer, source: this.source })
}

您正在获取undefined值，因为您尝试在获得初始化之前尝试访问它们

demo