Question

我想在Angular项目的各个组件之间共享我的主要对象。

我的主要组件是Map组件。

@Component({
  selector: 'app-map',
  template: `<div id="map"></div>`
})
export class MapComponent {

  map: Map;

  constructor() {
    this.map = new Map({});
  }

}

map的{{1}}对象将在其他组件中使用。

MapComponent将在MapControlComponent对象中添加一个对象。 map没有视图。

MapControlComponent

用法如下：

@Component({
  selector: 'app-map-control',
  template: ``
})
export class MapControlComponent {

  constructor() {
    var control = new MapControl();

    // Following object will be add in map object in MapComponent.
    // map.controls.add(control);
  }

}

但是我也应该多次使用以下内容。

<app-map>
    <app-map-control></app-map-control>
<app-map>

（自然地，所有地图对象都不同。）

但是我无法决定如何在MapComponent中共享地图对象。除了MapControlComponent之外，我还可以使用其他使用地图对象的组件。

Answer 1

您必须掌握Angular中的概念和最佳实践。

首先，to communicate between components应该使用服务。

但是对于您而言，the component is supposed to hold the view's logic。

对于其他组件，a component is supposed to have a view，否则，它只是另一个Angular功能（除了组件之外的所有组件）。

就可重用性和最佳实践方面，我建议您提供的服务是为给定地图创建新控件。签名为

createControl(map: Map): MapControl {}

您还可以将其附加到地图上：

addControlToMap(control: MapControl, map: Map): void {}

通过此过程，您的服务将抽象地图逻辑（意味着您的组件变得“笨拙”，因为如果您更改地图库，则只需更改服务并提供相同的实现），并且组件保持其代码简洁明了。您还尊重Angular提供的最佳实践，它可以提高代码的可重用性和易读性。

如何在组件之间共享公共对象？

1 个答案: