Question

我正在尝试为包含标记组件的角度编写一个地图组件。

<app-map>
  <app-marker 
    *ngFor="let device of (devices$ | async)" 
    [position]="device.position"></app-marker>
</app-map>

我希望标记组件能够将任何新位置通知地图组件。

import { Component, OnInit, Input, Output } from '@angular/core';

@Component({
  selector: 'app-marker',
  templateUrl: './marker.component.html',
  styleUrls: ['./marker.component.scss']
})
export class MarkerComponent implements OnInit, AfterContentInit {
  @Input() position: string;

  constructor() { }

  ngOnInit() {
  }
}

以下是地图组件：

import { QueryList, Component, OnInit, ViewChild, ElementRef, Output, EventEmitter, ViewChildren } from '@angular/core';
import { Map } from '../../map';
import { MarkerComponent } from '../marker/marker.component';

declare var H: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  private map: any;

  @Output() event: EventEmitter<string> = new EventEmitter();

  @ViewChild('map')
  public mapElement: ElementRef;

  @ViewChildren(MarkerComponent) markers: QueryList<MarkerComponent>;

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

  ngOnInit() {
  }

  public ngAfterViewInit() {
    this.map.init(this.mapElement);
    this.markers.changes.subscribe(changes => console.log(changes));
  }
}

但是，永远不会将任何更改通知给地图组件。那么在那种情况下正确的方法是什么？

谢谢

Answer 1

您可以尝试从父母那里观察到孩子的变化，而不是试图从父母那里观察孩子的变化。

为此，您可以在孩子内部使用@Output()装饰器。

Check out this demo to see it in action.

复合组件：如何将信息传递给父级

1 个答案: