パラメータ2を使用した角度2のルートonInitコンポーネントを再初期化する

Question

新しいパラメータでコンポーネントをルーティングすると、コンポーネントが再初期化されるという問題があります。ここに私のルートがあります。

const appRoutes: Routes = [ 
    { path: '', component: MyNewComponentComponent }, 
    { path: 'tiles', component: DisplayTileData }, 
    { path: 'tiles/:master/:filters', component: DisplayTileData } 
]; 

"タイル"にルーティングし、サービスコールを実行してデータを取得します。次に、「マスター」と「フィルタ」の値を持つ同じコンポーネントに戻ってくる2つのボタンがあります。パラメータを使用してコンポーネントにルーティングすると、コンポーネントが再初期化され、サービスコールが繰り返されます。私はまた、ページ上にテキスト入力を持っています。このコンポーネントに最初にルーティングしてテキストを追加すると、パラメータを含むルートもそのテキストを消去します。

<a *ngFor="let tile of tiles">{{tile.id}}</a><br/><br/> 

<input class="form-control" maxlength="30" minlength="3" name="from" ng-reflect-maxlength="30"> 
<button (click)="addNumberToFilter(15)"></button> 
<button (click)="addNewMasterPath('do')">add new Number to Filter</button> 

新しいパラメータでルーティングするときにこのルートの再初期化を防止する方法はありますか？

私はボタンのデフォルト値を持っています。ここにメソッドがあります。

public variable: any = [3,4]; 
public master: any = 'eat'; 

addNewMasterPath(newMasterVariable) { 
    this.master = this.master + '-' + newMasterVariable; 
    var newMap = this.variable.map(items => { return items}).join('-'); 
    this.router.navigate(['tiles/', this.master, newMap]); 
} 

addNumberToFilter(newParameter) { 
    this.variable.push(newParameter); 
    var newMap = this.variable.map(items => { return items}).join('-'); 
    this.router.navigate(['tiles/', this.master, newMap]); 
} 

Answer 1

ルーティングバックパラメータを持つコンポーネントにコンポーネントを再初期化し、サービスコールを繰り返します。

これは、移動先の新しいルートがアプリケーション内の別のルートとして指定されているためです。再初期化されないコンポーネントは、同じルートでなければなりません。

私はあなたの特定のシナリオに応じて、ここでは異なる可能性を参照してください。タイルコンポーネントがこれを受信しなくても意味がありません/あなただけのサービス呼び出しを行うために/タイルをロードする場合

、その後tiles/:master/:filtersへのルートが、データを取得するには、リゾルバを使用してAPI呼び出しを行い、次にtiles/:master/:filters経路しか持たないと考えることができます。 official docsから

、あなたはリゾルバ内のサービス呼び出しを行うことができます。その後、あなたのルートにあなたのようにそれを指定することができ

@Injectable() 
export class MasterFiltersResolver implements Resolve<MasterFilter> { 
    constructor(private cs: MasterFiltersService, private router: Router) {} 
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> { 
    let id = route.params['id']; 
    return this.cs.getData(id).then(data => { 
     if (data) { 
     return data; 
     } 
    }); 
    } 
} 

：

{ path: '', component: MyNewComponentComponent }, 
{ path: 'tiles/:master/:filters', component: DisplayTileData, 
    resolve: { 
     masterFilters: MasterFilterResolver 
    } 
} 

この方法は、それが取得されますコンポーネントをロードする前に必要なデータ。あなたの/タイルルートコンポーネントは、マスタとフィルタデータのないスタンドアロンコンポーネントとして理にかなっている場合

は：

この場合、あなたはオプションのパラメータを使用することができます。

オプションのパラメータを持つとき、あなたはあなたのルート定義

{ path: '', component: MyNewComponentComponent }, 
{ path: 'tiles', component: DisplayTileData } 

そしてrouter.navigate('/tiles', {master: '', filter: ''}を通じてこのルートにナビゲートする上でのみ、このルートを持っているでしょう。この場合

、あなたの部品のようなものが必要になります。あなたは非同期操作を行うための任意の変化に反応することができるように

constructor(private route: ActivatedRoute) {} 

this.route.params.subscribe(params => { 
    // do something 
}); 

this.route.paramsは、のparamsの観測可能です。