Question

我目前正在以角度2工作。在这里，我面临着一个有趣的问题。我的标题中有一个搜索栏，它将我重定向到“ resultsComponent ”。在 resultsComponent 中，它会显示搜索结果。但是当我站在 resultsComponent 并希望搜索其他内容时。当我在搜索栏中输入要搜索的内容时，它不会重定向我，因为我已经在该组件上。由于 resultsComponent 的构造函数没有再次点击。并且我无法获取查询值，因为我在构造函数中获取查询值。我该如何重新加载这个构造函数。这是我的代码示例。的 HeaderSearch

<input type="search" name=query [(ngModel)]="query" #quer="ngModel" class="form-control"  class="form-control" required>
                                <button type="submit"(click)="Search()"  class="btn">
                                    <i class="icon icon-header-search"></i>
                                </button>

和 .ts

Search(){
//  alert(this.query)
//console.log(this.query);
        localStorage.setItem('val',JSON.stringify(this.query));
this.router.navigate(['/result']);

      }

和 result.ts

constructor() { 
  this.query=JSON.parse(localStorage.getItem('val'));
  }

 this.httpService.searchGeneric(this.query,1).subscribe(
      data => {
        this.Getspecs = data;
    this.count=data['totalItems'];
      }
    );

当我站在结果组件上时。任何机构都可以告诉我的搜索仍然可以工作，并在我再次搜索时更新我的搜索结果组件。任何帮助或建议都非常感谢。

Answer 1

我可以用起点帮助你。在标题搜索组件中，为结果组件定义viewchild。在结果中，componant定义了一个方法，它将在构造函数中执行您正在执行的所有操作，只需在构造函数中保持依赖项injectiom。

现在点击搜索按钮，搜索方法将在标题搜索组件中调用，在此方法中使用viewchild对象调用结果组件方法，所有内容都将被刷新。以下是一些示例代码：

搜索组件：

@ViewChild(ResultsComponent) resultsComponent: ResultsComponent;

Search(){
   //  alert(this.query)
  //console.log(this.query);
  localStorage.setItem('val',JSON.stringify(this.query));
  this.router.navigate(['/result']);
  resultsComponent.open();
}

结果组件：

constructor() { 
}

open() {
  this.query=JSON.parse(localStorage.getItem('val'));
  this.httpService.searchGeneric(this.query,1).subscribe(
    data => {
      this.Getspecs = data;
  this.count=data['totalItems'];
    }
  );   
}

如何在角度2中刷新或重新加载组件？

1 个答案: