Javascript 角度-访问子组件中的父变量

我有四个组件，需要将数据从父级传递给子级。

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>

在

层组件中

我有变量

层

和

源

。在

ngOnInit（）

中，我设置了这两个值。现在我需要访问嵌套组件中的两个值（

Marker

和

Heatmap

）。我试图在

构造函数（）中插入
LayerComponent
，但无法访问其变量

谢谢你的帮助
 使用
Input
Decorator并确保
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>

在图层组件中

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

导出类LayerComponent实现OnInit{
图层：任意；
资料来源：任何；
@Output（）onDataChange:EventEmitter
我知道这是可能的，但这看起来太“不干净”了。没有其他方法吗？我不想将[layer]和[source]添加到每个包含的功能（标记、热图…）此外，我需要一个处理源和层逻辑的LayerObject组件。所有功能组件（如marker或heatmap）都将由LayerObject扩展。我确实尝试将其注入构造函数中。如果我使用console.log（this.layer）它向我显示了图层和源代码。但是如果我尝试阅读this.layer.layer或this.layer.source，它会显示undefined。请参阅更新bro，您可以在初始化之前访问它们。无法使用完整的代码对其进行测试，但到目前为止它在我的家庭项目中仍然有效。谢谢：）这是使用
@Input（）的经典示例
映射。具有
标记
和
热图
组件
@Input（）
装饰属性
层
和
源代码
，然后传递到子组件。/现在，您对答案的附加注释表明您有一些附加要求。我建议对它们进行质疑。在中，Günter Zöchbauer建议了一种将父级注入子级构造函数的方法。是的，带有一个通知：thightly耦合。这直接与组件的整个要点背道而驰。如果您的子组件与其父组件紧密耦合，那么您必须问问自己，为什么首先要做子组件？组件应该是可重用的，正如文档所说，
Input（）/Output（）
应该是它与“外部世界”沟通的主要方式。看看官方文档：那么服务呢？在layerService中创建一个层和一个源，每次添加一个新的层组件。在marker/heatmap组件中，我从服务中获得它的层/源。
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 })
}