路線更改時的角度@input 值

Question

我正在使用 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（無需重新加載或刷新瀏覽器頁面）時，只有父親能夠看到。

Answer 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>