コンポーネントを手動で再レンダリングするにはどうすればよいですか？

Question

私はAngular2の新人です。私はAngular 1ダイジェストサイクルに慣れています。つまり、ビューの範囲を更新すると、$scope.$digest()を呼び出してダイジェストを手動でトリガーすることができます。しかし、新しいフレームワークに古いバージョンの暗黙的なデータバインディングがないことを考えると、Angular2でこれを行う方法はわかりません。

ここに私の問題があります。

// Router 
export const AppRoutes : RouterConfig = [ 
    { 
    path: 'my/:arg/view', 
    component: MyComponent 
    } 
] 

は、その後、私はこのコンポーネントを持っている：

// Component 
export class MyComponent { 
    constructor(private route : ActivatedRoute, 
     private r : Router) { 
    let id = parseInt(this.route.params['value'].id); 
    console.log(id); 
    // do stuff with id 
    } 

    reloadWithNewId(id:number) { 
     this.r.navigateByUrl('my/' + id + '/view'); 
    } 
} 

私は/my/1/viewをURLに移動言うことができます私は、パラメータ付きのURLがヒットしたときに、コンポーネントをロードするルートを持っています。コンストラクターが呼び出され、番号1が記録されます。ただし、reloadWithNewIdに新しいID、reloadWithNewIf(2)をコールした場合、コンストラクターは再び呼び出されません。コンポーネントを手動で再ロードするにはどうすればよいですか？

Answer 1

コンポーネントをリロードする必要はありません。ただ、モデルとビューの更新自体を更新：

export class MyComponent { 
    constructor(private route : ActivatedRoute, 
     private r : Router) {} 

    reloadWithNewId(id:number) { 
     this.r.navigateByUrl('my/' + id + '/view'); 
    } 

    ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
     this.paramsChanged(params['id']); 
     }); 
    } 

    paramsChanged(id) { 
     console.log(id); 
     // do stuff with id 

    } 
} 

Answer 2

パラメータを更新するだけでは、コンストラクタは再度呼び出されません。 Componentクラスがすでにインスタンス化されているので、

あなたが変化を検出したい場合は、以下のようなのparamsの変更を購読することができ、

constructor(route: ActivatedRoute) { 
    route.params.subscribe(param => { 
     let id = param['id ']; 
     // Do your stuff with id change. 
    }); 
    } 

・ホープ、このことができます！

Answer 3

あなたは戻って、あなたが望むものにし、いくつかの他のURLに移動してによって再初期化コンポーネントにangular2を強制することができます。

コンポーネントコンストラクタ：テンプレート（例）で

constructor(private router: Router) {} 

：そして

(click)="onTabChange(id)" 

コンポーネントクラス内の：ここ

ルータクラスのメソッドを使用して私の簡単な回避策（https://angular.io/docs/ts/latest/api/router/index/Router-class.html参照）です。

onTabChange() { 
    if (this.router.navigated === false) { 
    // Case when route was not used yet 
    this.router.navigateByUrl(`/module/${id}`); 
    } else { 
    // Case when route was used once or more 
    this.router.navigateByUrl(`/index`).then(
    () => { 
     this.router.navigateByUrl(`/module/${id}`); 
     }); 
    } 
}