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，并且未导入polyfill。

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;

Angular 2根据用户输入

3 个答案: