角度2はユーザー入力に基づいて現在のコンポーネントをリロードします

Question

私のAngular2アプリケーションでは、UI入力時にWebサービスからデータを取り出すコンポーネントがロードされます。 ユーザー入力が変更されたときにaptSearchComponentをリロードします。新しいデータは入力のサービスベースからフェッチされますが、コンポーネントはリロードされません。

入力がheaderComponentにあり、ユーザーがいくつかの検索条件を入力してEnterキーを押すと、データがsharedServiceに渡され、aptSearchComponentにルーティングされ、共有サービスからデータが取得され、結果が表示されます。

headerComponentテンプレートは一番上にあり、aptSearchcomponentテンプレートはその下に表示されます。

@Component({ 
    selector: 'app-header',  
    template: ` 

      <div class="mdl-textfield__expandable-holder"> 
       <input class="mdl-textfield__input" type="text" id="search" (keyup.enter)="Search($event)">    
      </div>     
    `,  
}) 

export class HeaderComponent { 

    public apartments: Object[]; 

    constructor(private apartmentService: ApartmentService,private router: Router,private sharedService: SharedService) { 
     this.apartmentService=apartmentService; 
     this.sharedService=sharedService; 
    } 


    Search(event){   
     this.apartmentService.searchApt2(event.target.value).subscribe(res => {this.sharedService.temp = res   
     this.router.navigate(['AptSearch'])});  
    } 
} 

は、どのように私は基本的にthis.aptDetails内のデータが変更された角度2でコンポーネントをリロードすることができますが、テンプレートはまだ古いデータを示しています。

export class AptSearchComponent implements OnInit { 

    aptDetails: any; 

    constructor(private apartmentService: ApartmentService, private sharedService: SharedService,private zone:NgZone) { 
    this.apartmentService = apartmentService; 
    } 

    ngOnInit(){  
     this.aptDetails = this.sharedService.temp; 
     JSON.stringify(console.log(this.aptDetails)); //the data here is changed based on input, but the template is not refreshed and I still see the previous result. 
    } 
} 

私は（コンストラクタで次のことを試してみました）が、運

this.zone.run(()=>this.aptDetails=this.sharedService.temp); 

私はRC4を使用していない、とインポートされませんでpolyfillsています。

Answer 1

リロードするには簡単なトリックで削除できます。

* ngIfをコンポーネントに置き、最初にtrueに設定します。

削除する場合はfalseに設定してから、setTimeoutを使用して即座に真に戻します。これで削除され、再作成されます。

再作成すると、親コンポーネントから渡す新しいパラメータが渡されます。

（Angular2はフォームをリセットするためにこのトリックを使用していましたが、より良い方法が現在利用可能かどうかはわかりませんが、RCではこれが正しいアプローチです）。

Answer 2

変更検出は、プロパティ参照が変更された場合にのみ機能します。

aptDetailsを更新する前にリセットする必要があります。

this.aptDetails = {} // or whatever type it is 
this.aptDetails = this.sharedService.temp; 

Answer 3

これは、子コンポーネントの@InputおよびngOnChanges（）フックを使用して解決しました。誰かがそれを必要とする場合、詳細な回答を共有します。