路由更改时的角度@input值答案

【问题标题】：Angular @input value when route change路由更改时的角度@input值
【发布时间】：2021-09-21 14:28:51
【问题描述】：

我使用的是 Angular 8，我有两个组件：父亲和孩子。

当url参数发生变化时，父组件必须发送一个对象或一个字符串。

在父组件中我写了这段代码，它能够理解url是否已经改变并为孩子设置urlParam：

  this.activatedRoute.queryParamMap.subscribe((paramMap: ParamMap) => {
      this.urlParam = JSON.stringify(paramMap);
   
  });

父亲html：

<search [searchCriteriaForm]="searchCriteriaForm" [urlParam]="urlParam"></search>

在子组件中，我放了这个：

 @Input() set urlParam(urlParam: string) {
  console.log('The child has well received');
 }

当 url 发生变化时，我看到数据到达了父组件，但没有到达子组件。

我注意到，当我（第一次）加载页面时，孩子接收到的参数非常好，但是当我更改 url（不重新加载或刷新浏览器页面）时，只有父亲能够看到。

【问题讨论】：

标签： angular typescript

【解决方案1】：

我建议在这种情况下采取被动的方式，因为要查明问题有点困难。

import { BehaviorSubject } from 'rxjs';

// define this on field level
urlParam = new BehaviorSubject("");
//...

  this.activatedRoute.queryParamMap.subscribe((paramMap: ParamMap) => {
      this.urlParam.next(JSON.stringify(paramMap));
  });

html

<search [searchCriteriaForm]="searchCriteriaForm" [urlParam]="urlParam | async"></search>

【讨论】：