Угловая 2 перезагрузка текущего компонента на основе пользовательского ввода

Question

В моем приложении Angular2 при входе пользовательского интерфейса загружается компонент, который извлекает данные из веб-службы. Я хочу перезагрузить aptSearchComponent, когда пользователь вводит изменения. Хотя новые данные извлекаются из базы данных на входе, компонент не перезагружается.

Входной сигнал находится в headerComponent, когда пользователь вводит некоторые критерии поиска и попадает, данные передаются в 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'])});  
    } 
} 

Как я могу перезагрузить компонент в угловыми 2. В основном данные в this.aptDetails изменяется, но шаблон по-прежнему показывает старые данные.

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() крючок в компоненте ребенка. поделится подробным ответом, если кому-то это понадобится.