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

Posted 2023-02-16

【中文标题】Angular 2 根据用户输入重新加载当前组件

【英文标题】：Angular 2 reload the current component based on user input

【发布时间】：2016-11-04 09:48:41

【问题描述】：

在我的 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。

【问题讨论】：

您真的要重新加载组件吗？或者您只想重新加载aptDetails

Aptdetails，它在当前代码的控制台中重新加载。视图没有改变。

输入在哪里？请添加更多信息

为什么要重新加载组件？如果您想在输入更改时重新加载数据，请尝试使用 ngOnChanges。如果您想重新加载子视图，请使用 *ngIf 和 ng onChanges。您能添加更多信息吗？

【参考方案1】：

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

【参考方案2】：

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

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

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

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

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

【参考方案3】：

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

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

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

【讨论】：

您能否在原始问题中添加更多信息？喜欢如何管理用户输入？你在使用 FormControl 吗？

添加了更多细节