在路由器上完全重新渲染組件

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在這裏和一些奇怪的代碼，它只是一個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()，並從ngOnInit()調用initSvg()，並訂閱路由參數更改並從那裏調用它：

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