为什么angular不在动态创建的零部件中填充视图？

我有一个使用第三方地图库的组件

MousePositionComponent

位于my

MapModule

中

@Component({
  ....,
  template: `<span>{{coordinate}}</span>`
})
export class MousePositionComponent implements OnInit {

  public coordinate: string;

  ngOnInit() {
    this.map.on("click", this.onMapClicked());
  }

  private onMapClicked(): (evt: MapBrowserEvent) => void {
    return (event: MapBrowserEvent) => {
      let coordinate = this.transformCoordinate(event.coordinate);
      this.coordinate = this.formatCoordinate(coordinate);
      console.log(this.coordinate)
    }
  }
}

@组件({
....,
模板：`{{坐标}}`
})
导出类MousePositionComponent实现OnInit{
公共坐标：字符串；
恩戈尼尼特（）{
this.map.on（“单击”，this.onMapClicked（））；
}
私有onMapClicked（）：（evt:MapBrowserEvent）=>void{
返回（事件：MapBrowserEvent）=>{
设坐标=this.transformCoordinate（event.coordinate）；
this.coordinate=this.formatCoordinate（坐标）；
console.log（this.coordinate）
}
}
}

---

因此，我在我的

ApplicationModule

中使用

MapModule

。如果我在动态创建的

SommeComponent

中使用，它会工作。如果我有另一个动态创建的组件，视图不会更新，但是console.log（this.coordinate）可以工作。

函数在Angular的区域外执行，因此您需要明确告诉它，在单击事件时运行更改检测

constructor(private ngZone:NgZone){

}



 ngOnInit() {
    this.map.on("click", this.ngZone.run(()=>this.onMapClicked()));
  }

  private onMapClicked(): (evt: MapBrowserEvent) => void {
    return (event: MapBrowserEvent) => {
      let coordinate = this.transformCoordinate(event.coordinate);
      this.coordinate = this.formatCoordinate(coordinate);
      console.log(this.coordinate)
    }
  }

---

该函数在Angular的区域外执行，因此您需要明确地告诉它，以便在单击事件时运行更改检测

constructor(private ngZone:NgZone){

}



 ngOnInit() {
    this.map.on("click", this.ngZone.run(()=>this.onMapClicked()));
  }

  private onMapClicked(): (evt: MapBrowserEvent) => void {
    return (event: MapBrowserEvent) => {
      let coordinate = this.transformCoordinate(event.coordinate);
      this.coordinate = this.formatCoordinate(coordinate);
      console.log(this.coordinate)
    }
  }

---

如何删除事件Ngondestory？在components字段中的某个位置引用此回调，并在Ngondestory上调用this.map.removeEventListener（“单击”，callbackReference），但我们将

this.ngZone.run（）

函数放在

this.map.on

方法中。因此，我认为用于删除类似

this.mappcomponent.map.un（“单击”，this.ngZone.run（（）=>this.onmapplicked（））

这是真的吗？如何删除事件Ngondestory？在components字段中的某个地方引用此回调，并在Ngondestory上调用this.map.removeEventListener（“单击”，callbackReference），但我们将

this.ngZone.run（）

函数放在

this.map.on

方法中。因此，我认为用于删除类似

this.mappcomponent.map.un（“单击”，this.ngZone.run（（）=>this.onmapplicked（））这是真的吗？