Angular 5 - 路由更改 url 但不導航

Question

目前我有三個不同的模塊：

• App Module -- 帶有 emtpy 一個數組 Root 配置
• 主頁模塊 - 帶有主頁 comp 的 '' 路徑配置。 用於搜索玩家
• 玩家結果模塊——顯示搜索結果（玩家統計信息或錯誤頁面）

現在在這個玩家搜索模塊中，我有一個帶有子組件的玩家搜索結果組件。 其中一個子組件是一個帶有列表的模式。 如果我單擊此列表項（播放器），它應該“導航”到父組件並更新其視圖。 但唯一更新的是 url。

window.location.href(url)有一個解決方法，可以在導航方法更新 url 后重新加載頁面。 但我不喜歡變通辦法。

父組件幾乎看起來像：

export class PlayerSearchResultComponent implements OnInit, AfterViewInit {

 public isLoading = true;
  public searchValue: string;
  public playerResult: PlayerByPlayerTagType;
  public hasNoResultFound = false;
  public clanInfo: ClansByClantagType;

  constructor(private playerSearchService: PlayerSearchService,
              private activatedRoute: ActivatedRoute,
              private clanSearchService: ClanSearchService) {
  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: Params) => {
      this.searchValue = params['playerId'];
    });
  }

  ngAfterViewInit() {
    this.playerSearchService.getPlayerByPlayerTag(this.searchValue).subscribe(player => {
        this.playerResult = player;
        if (!isUndefined(this.playerResult.clan)) {
          this.clanSearchService.getClanByClanTag(this.playerResult.clan.tag).subscribe((data: ClansByClantagType) => {
            this.clanInfo = data;
          });
        }
      }, () => {
        this.hasNoResultFound = true;
        this.isLoading = false;
      },
      () => this.isLoading = false);
  }
}

和子組件：

export class ClanModalComponent {

  @ViewChild('childModal') childModal: ModalDirective;
  @Input() playerResult: PlayerByPlayerTagType;
  @Input() clanInfo: ClansByClantagType;


  constructor(private router: Router) {
  }

  open() {
    this.childModal.show();
  }

  memberSearch(member) {
    this.childModal.hide();
    this.router.navigate(['search/' + member.tag]);
  }

}

播放器結果模塊如下所示：

const appRoutes: Routes = [
  {path: 'search/:playerId', component: PlayerSearchResultComponent}
];

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ...
    RouterModule.forChild(
      appRoutes
    )],
  providers: [
     ...
  ],
  exports: []
})
export class PlayerResultModule {
}

Answer 1

因此，要根據路由參數加載，您必須訂閱路由參數並加載數據。 ngAfterViewInit 將不再被處理。 因為組件在路由更改后不會再次加載！

ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: Params) => {
        this.searchValue = params['playerId'];
        this.playerSearchService
            .getPlayerByPlayerTag(this.searchValue)
            .subscribe(player => {
                this.playerResult = player;
                ...
                ...
            });
     }
}

Answer 2

//browser is already on /pathName/oldID, 
//this means our Routes are correct
 
 let newLocation = `/pathName/${newID}`;
 // override default re-use strategy
 this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };
 this.router
   .navigateByUrl(newLocation)
   .then(
   (worked) => {
        //works only because we hooked 
        //the routeReuseStrategy.shouldReuseRoute above
   },
   (error) => {
    debugger;
    }
 );

我已經看到這個問題的次數比我願意承認的要多，當我有一個父容器重用子組件時，通常會看到它。

• 默認情況下，父路由是 xyz/。 一切都很好。
• 父將路由更改為 xyz/1 以顯示 1 的人員 ID 的詳細信息
• 父頁面除了更改 url 什么都不做。

這是因為 Angular 的默認路由重用策略不會重新加載頁面！

上面的代碼修復了這個默認行為，但必須放入適當的組件中才能從頭開始重新加載行為。

請注意，還有其他選擇... 假設您希望保持組件重用的速度。 在這種情況下，只需提供一個進入已加載組件的入口點即可重置數據，讓組件通過 changeDetectorRef.DetectChanges() 進行更改。