角2更改參數的路線

Question

我目前正在編寫我的第一個Angular 2應用程序。 我有具有以下簡單的模板的OverviewComponent：

<div class="row"> 
    <div class="col-lg-8"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="col-lg-4"> 
    <app-list></app-list> 
    </div> 
</div> 

訪問到/overview網址/我的路由器重定向我然後加載路由器，出口內的地圖時。 有一個可點擊的項目列表，觸發一個<app-detail>而不是應用程序組件。因此，我在URL中傳遞引用的json文件的id：/details/:id（在我的路線中）。

上述所有工作完全正常的。如果我現在點擊其中一個列表項目，將顯示詳細信息，但是當我選擇另一個列表元素時，視圖不會更改爲新的詳細信息。網址確實發生了變化，但內容未重新加載。我如何實現DetailComponent的重新初始化？

Answer 1

按照第一最終釋放，這是解決。

就非常重視正確重置組件的狀態，當參數變化

this.route.params.subscribe(params => { 
    this.param = params['yourParam']; 
    this.initialiseState(); // reset and set based on new parameter this time 
}); 

Answer 2

這目前不直接支持。另請參見https://github.com/angular/angular/issues/9811

你可以做的是一樣的東西

<div *ngIf="doShow" class="row"> 
    <div class="col-lg-8"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="col-lg-4"> 
    <app-list></app-list> 
    </div> 
</div> 

doShow:boolean: true; 

constructor(private _activatedRoute: ActivatedRoute, private _router:Router, private cdRef:ChangeDetectorRef) { 
    _router.routerState.queryParams.subscribe(
    data => { 
     console.log('queryParams', data['st']); 
     this.doShow = false; 
     this.cdRef.detectChanges(); 
     this.doShow = true; 
    }); 
} 

（未測試）

Answer 3

我不知道是否有這個問題的答案相似一個我要在這裏提出，所以無論如何，我會做到這一點：

我設法實現了「假」重裝下面的方式。

我基本上沒有創造它重定向我的「真實」組件的組件我想用：

@Component({ 
    selector: 'camps-fake', 
    template: '' 
}) 
export class FakeComponent implements OnInit { 

    constructor(private _router:Router, 
       private _route:ActivatedRoute) 
    { } 

    ngOnInit() { 
    let id:number = -1; 
    this._route.params.forEach((params:Params) => { 
     id = +params['id']; 
    }); 

    let link:any[] = ['/details', id]; 
    this._router.navigate(link); 
    } 

} 

因此通過選擇列表項的路由器將定位/fake/:id剛剛提取的ID從URL導航到「真實」組件。

我知道有可能是一個更簡單，更奇特的方式，但我認爲這個解決方案工作得很好，因爲假的並沒有真正引起人們的關注。只是當頁面重新加載時的'閃爍'是一個消極的方面，但就我的CSS知識到達那裏可能會有一些轉變來覆蓋這一點。

Answer 4

我使用情況下，如果子組件發送一個新的鏈接，併發出一個事件，那麼家長可以發現變化並調用一些重載功能，這將重新加載必要的數據解決它。 另一種選擇是訂閱route parameters, and found when it change 但我認爲，從angular2的傢伙應該考慮增加參數到router.navigate功能，可以強制重裝。 （forceReload =真）

Answer 5

可以檢測的參數的任何更改接收的，在我的情況下，我用解決，所以我加載信息不需要該參數（只有檢測到它改變）。這是我的最終解決方案：

public product: Product; 
private parametersObservable: any; 

constructor(private route: ActivatedRoute) { 
} 

ngOnInit() { 
    this.parametersObservable = this.route.params.subscribe(params => { 
    //"product" is obtained from 'ProductResolver' 
    this.product = this.route.snapshot.data['product']; 
    }); 
} 

//Don't forget to unsubscribe from the Observable 
ngOnDestroy() { 
    if(this.parametersObservable != null) { 
    this.parametersObservable.unsubscribe(); 
    } 
} 

Answer 6

此處應該加入是提供RouteReuseStrategy到你的模塊另一種選擇。

providers: [ 
    { 
    provide: RouteReuseStrategy, 
    useClass: AARouteReuseStrategy 
    } 
] 

路由器的默認行爲是重複使用的路由配置是否相同（這是當只有改變的情況下：在這個問題上的ID PARAM）。通過將策略更改爲不重用路由，組件將被重新加載，並且您不必訂閱組件中的路由更改。

的RouteReuseStrategy的實現可能是這樣的：

export class AARouteReuseStrategy extends RouteReuseStrategy { 
    shouldDetach(route: ActivatedRouteSnapshot): boolean { 
    return false; 
    } 
    store(route: ActivatedRouteSnapshot, handle: {}): void { 

    } 
    shouldAttach(route: ActivatedRouteSnapshot): boolean { 
    return false; 
    } 
    retrieve(route: ActivatedRouteSnapshot): {} { 
    return null; 
} 
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { 
    return false; // default is true if configuration of current and future route are the same 
} 
} 

我已經寫了一些關於它在這裏太：爲快速反應

https://pjsjava.blogspot.no/2018/01/angular-components-not-reloading-on.html