Как я могу разделить общий объект между компонентами?

Question

Я хочу поделиться своим основным объектом между компонентами в проекте Angular.

Мой основной компонент - это компонент карты.

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

  map: Map;

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

}

Объект map из 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>

Но также я должен использовать несколько раз следующим образом.

<div id="container">
    <div id="map1">
        <app-map>
            <app-map-control></app-map-control>
        <app-map>
    </div>

    <div id="map2">
        <app-map>
            <app-map-control></app-map-control>
        <app-map>
    </div>
</div>

(Естественно, все объекты карты отличаются от других.)

Но я не мог решить, как поделиться объектом карты в MapComponent. У меня также могут быть компоненты, отличные от MapControlComponent, которые используют объект карты.

Answer 1

Вы должны понять концепции и лучшие практики в Angular.

Перво-наперво: для связи между компонентами , вам следует воспользоваться услугой.

Но в вашем случае компонент должен содержать логику представления .

Для другого компонента, компонент должен иметь представление , в противном случае это просто еще одна угловая функция (все, кроме компонента).

Я бы посоветовал вам, с точки зрения возможности повторного использования и передового опыта, создать службу, которая создает новый элемент управления для данной карты . Подпись будет

createControl(map: Map): MapControl {}

Вы также прикрепите его к карте:

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

С помощью этого процесса ваши сервисы абстрагируют логику карты (то есть ваш компонент становится «тупым» в том смысле, что если вы измените библиотеку карт, вам нужно будет только изменить сервис и дать ту же реализацию), и Компоненты хранят его код чистым и коротким. Вы также уважаете лучшие практики, предлагаемые Angular, что повышает возможности повторного использования кода и упрощает чтение.