2017-06-14 25 views
0

私は角度2で働いています。私はそれに直面している、私は親からの子コンポーネントの関数を呼び出しています。子関数は最初にhtmlを読み込む私のデータセットを更新します。しかし、私は同じhtmlに立って、その関数をもう一度呼び出すと、そのデータセットに新しいデータがロードされているがそのhtmlはロードされていないことをコンソールに表示します。 全シナリオ: 私は自分のヘッダーセクションに検索バーを持っています。 whereは結果ページにリダイレクトされ、クエリデータを表示する関数を呼び出します。しかし、私はすでに一度クエリを検索し、結果ページに立っています。新しいデータクエリが関数を再度呼び出し、データセットが更新されます。コンポーネントはそのデータセットに従ってhtmlをリロードしません。どのように私はそれをリロードすることができますか? 提案がありますか? ここはコードサンプルです。 私header.ts更新後にDOMが更新されないのはなぜですか?

Search(){ 
localStorage.setItem('val',JSON.stringify(this.query)); 

this.router.navigate(['/results']); 
this.mobiles.ngOnInit(); 

     } 


} 

resuls.ts

ngOnInit() { 


     this.query=JSON.parse(localStorage.getItem('val')); 
alert(this.query) 

this.httpService.searchGeneric(this.query,1).subscribe(
     data => { 
     this.Getspecs = data; 

    this.count=data['totalItems']; 

    this.ref.detectChanges(); 
     this.ref.reattach(); 

    console.log(data) 

    } 
    ); 

は、新たな変化が結果コンポーネントのHTMLで表示されない理由は?誰にでもこれについてのアイデアはありますか?助けが必要でした。ありがとう。

+0

結果ページで関数を呼び出した後、再度同じページにルーティングし直していますか?あなたがコンポーネント上にいて、同じコンポーネントをもう一度リロードすると、Angularはバインディングをリフレッシュしません。既に読み込まれたコンポーネントのバインドを再度リフレッシュしないというパフォーマンスの向上です。 –

+0

[https://angular.io/guide/router#observable-params-and-component-reuse]を読んで、あなたが望むものを達成する方法を示します。 –

答えて

0

これはAngularが動作する方法です。

同じ機能を使用しているため、同じコンポーネントに再度ルーティングします。

コンポーネントを使用していて、同じコンポーネントをもう一度リロードすると、Angularはバインドをリフレッシュしません。既に読み込まれたコンポーネントのバインドを再度リフレッシュしないというパフォーマンスの向上です。

ただし、角度は、リロード時に明示的にバインディングを変更する必要がある場合に備えています。あなたはparamsを観測し、paramsをルート変更に登録することができます。このサブスクリプション内のアクションはバインディングの変更を強制します。

詳細情報here Angular official docs。

+0

どのような簡単な例ですか?あなたが私のコードで提供できる変更は何ですか? – maadi

関連する問題