Angular 2 根据用户输入重新加载当前组件

Question

在我的 Angular2 应用程序中，在 UI 输入上加载了一个组件，该组件从 Web 服务中提取数据。 我想在用户输入更改时重新加载 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'])});      
     }
}

如何在 Angular 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

我通过在子组件中使用 @Input 和 ngOnChanges() 挂钩解决了这个问题。如果有人需要，将分享详细的答案。

Answer 2

要重新加载它，您可以通过一个简单的技巧将其删除。

在组件上放一个 *ngIf 并初始设置为 true。

当您想删除它时，将其设置为 false，然后使用 setTimeout 将其立即弹回 true。这将删除它，然后重新创建它。

当你重新创建它时，传递你想要从父组件传入的新参数。

（Angular2 曾经使用这个技巧来重置表单，我不确定现在是否有更好的方法，但在 RC 期间这是正确的方法）。

Answer 3

更改检测仅在属性引用更改时才起作用。

您必须在更新之前重置 aptDetails。

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