Question

我需要重新获得一个关于路由器更改的组件，问题是我在SVG文件中绘制了一些数据。

一些代码：

ngOnInit() {
    const self = this;
    this.route.params.subscribe(params => {
      this.DiagnosticServerID = params['diagnosticServerID'];
      this.ConnectionName = params['connectionName'];

      jQuery('#svgobj')[0].addEventListener('load', function () {
      _snap = Snap("#svgobj"));
      self.registerCpuUsageControllerEvent();
      svgTooltip(_snap);
      self.go();
    });
    });
  }

问题出在哪里？问题出在jQuery（'#svgobj'）[0] .addEventListener上，当我第一次使用这个组件时，它只能工作一次。

所以我想彻底改变路线变化的组成部分。

不要问为什么我在这里使用jQuery和一些奇怪的代码，它只是来自Ember的POC和端口：）

更新了工作代码：

 svgObj: boolean = false;
constructor(public api: ApiService,
              private route: ActivatedRoute,
              private router: Router,
  ) {
    this.route.params.subscribe(params => {
      this.DiagnosticServerID = params['diagnosticServerID'];
      this.ConnectionName = params['connectionName'];
      if(this.svgObj){
        this.start();
      }
    });
  }

initSvg(){
    const self = this;
    jQuery('#svgobj')[0].addEventListener('load', function () {
      self.start();
    });
  }

  start(){
    const self = this;
    _snap = Snap("#svgobj");
    self.registerCpuUsageControllerEvent();
    svgTooltip(_snap);
    self.go();
  }

Answer 1

将代码从ngOnInit()移至initSvg()并从initSvg()调用ngOnInit()并订阅路由参数更改并从那里调用它：

constructor(activatedRoute:ActivatedRoute) {
  activatedRoute.params.subscribe(val => this.initSvg());
}

在路由器更改时完全重新发布组件

1 个答案: