Angular 2 根据用户输入重新加载当前组件 [英] Angular 2 reload the current component based on user input

问题描述

在我的 Angular2 应用程序中，在 UI 输入上加载了一个组件，该组件从 Web 服务中提取数据.我想在用户输入更改时重新加载 aptSearchComponent.尽管根据输入从服务中获取新数据，但不会重新加载组件.

输入在headerComponent中，当用户输入一些搜索条件并点击回车时，数据被传递到sharedService并路由到aptSearchComponent，在那里从共享服务中提取数据并显示结果.

headerComponent 模板停留在顶部，aptSearchcomponent 模板显示在其下方.

@Component({选择器:'应用程序头'，模板:`<div class="mdl-textfield__expandable-holder"><input class="mdl-textfield__input" type="text" id="search" (keyup.enter)="Search($event)">

`，})导出类 HeaderComponent {公共公寓:对象[]；构造函数(私人公寓服务:公寓服务，私人路由器:路由器，私人共享服务:SharedService){this.apartmentService=apartmentService;this.sharedService=sharedService;}搜索(事件){this.apartmentService.searchApt2(event.target.value).subscribe(res => {this.sharedService.temp = resthis.router.navigate(['AptSearch'])});}}

如何在 Angular 2 中重新加载组件.基本上 this.aptDetails 中的数据已更改，但模板仍显示旧数据.

导出类 AptSearchComponent 实现 OnInit {aptDetails: 任何;构造函数(私人公寓服务:公寓服务，私人共享服务:共享服务，私人区域:NgZone){this.apartmentService = 公寓服务；}ngOnInit(){this.aptDetails = this.sharedService.temp;JSON.stringify(console.log(this.aptDetails));//这里的数据是根据输入改变的，但是模板没有刷新，还是看到之前的结果.}}

我在构造函数()中尝试了以下操作，但没有成功

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

我使用的是 RC4，并且没有导入 polyfill.

解决方案

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

In my Angular2 app, on UI input a component is loaded which pulls data from a web service. I want to reload the aptSearchComponent when the user input changes. Although the new data is fetched from the service base on the input, the component is not reloaded.

The input is in the headerComponent, when the user inputs some search criteria and hits enter, data is passed to the sharedService and routed to aptSearchComponent, where data is pulled from the shared service and results are displayed.

The headerComponent template stays at the top and the aptSearchcomponent template is displayed below it.

@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'])});      
     }
}

How can I reload the component in Angular 2. Basically the data in this.aptDetails is changed, but template is still shows the old data.

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. 
    }
}

I tried the following in constructor() but no luck

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

I am using RC4, and polyfills in not imported.

解决方案

I resolved this by using @Input and ngOnChanges() hook in the child component. will share the detailed answer if anybody needs it.

这篇关于Angular 2 根据用户输入重新加载当前组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！