Question

在我的应用程序中，我有一个搜索表单。您可以通过添加查询参数来访问表单，然后该表单将成为预字段。

我想了解的是，如果单击导航中的搜索图标，则将清除预填充状态。该链接有效，因此浏览器中的URL更改了。但是该组件当然不会重新渲染。

是否有一种渲染组件的方法，或者只是一个LifeCycle Hook来捕获该组件？

Answer 1

您实际上不需要重新加载页面。您可以创建不同链接来定位表单，例如：

<a routerLink="/path/to-component" [queryParams]="{'query': 'value1'}">Link 1</a>
<a routerLink="/path/to-component" [queryParams]="{'query': 'value2'}">Link 2</a>
<a routerLink="/path/to-component" [queryParams]="{'query': 'value3'}">Link 3</a>

您需要在ts文件中订阅queryParams：

this._ActivatedRoute.queryParams.subscribe(queries => {
    console.log(queries);
    //whenever the link will be clicked
    //queries will be logged here
    //then do something like: refreshForm(queries)
});

Answer 2

尝试使用import { Subject } from "rxjs/Subject";

喜欢

  public runtimefilter: Subject<DataClass> = new Subject<DataClass>();

和在构造函数中观察是

constructor(){
    this.subscription = runtimefilter.subscribe(res => {
      this.filter = res;
               this.GetDataFunc();

     });
}

ngOnInit() {
    this.router.queryParams.subscribe((params) => {
  this.filter= params["value1"];
    runtimefilter.next(this.filter);

}}

仅查询参数更改时重新加载角度组件

2 个答案: