帶解析器的Angular 7路線不會加載組件

Question

我遇到了一個Angular 7問題，該路由中具有解析器的模塊的子組件無法加載。

app-routing.module.ts

{
  path: 'Account',
  loadChildren: './account/account.module#AccountModule'
}

account-routing.module.ts

{
  path: 'Profile',
  component: ProfileComponent,
  resolve: {
    profile: ProfileResolver
  }
}

profile.resolver.ts

@Injectable()
export class ProfileResolver implements Resolve<Profile> {

  constructor(private readonly accountService: AccountService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> {
    return this.accountService.profile();
  }
}

profile.component.ts

@Component({
⋮
})
export class ProfileComponent implements OnInit {

  model: Profile;

  constructor(private readonly route: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.model = this.route.snapshot.data['profile'] as Profile;
  }
}

account.service.ts

@Injectable()
export class AccountService {

  constructor(protected readonly http: HttpClient) {
  }

  profile(): Observable<Profile> {
    return this.http.get<Profile>(`${environment.apiUrl}/Account/Profile`);
  }
}

行為是，當導航到/Account/Profile ，將調用ProfileResolver ，命中服務器，並獲得帶有Profile對象的200響應（我可以在“網絡”選項卡中看到它），然后...什么都沒有。 無論是constructor或ngOnInit的方法ProfileComponent被調用。

如果我從AccountRoutingModule刪除ProfileResolver並直接從ngOnInit方法中調用AccountService ，那么它將起作用。 但是，在等待響應時，模板中存在許多模板解析錯誤（這就是我要使用resolve的全部原因）。

要使解析器與這些模塊一起使用，我還需要做些其他事情嗎？

這也可能是與此處所述相同的問題： Angular Router不會使用分解器加載組件

更新 ：我啟用了enableTracing所以我可以看到發生了什么。 這是輸出：

Router Event: NavigationStart
NavigationStart(id: 2, url: '/Account/Profile')
NavigationStart {id: 2, url: "/Account/Profile", navigationTrigger: "imperative", restoredState: null}

Router Event: RoutesRecognized
RoutesRecognized(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } )
RoutesRecognized {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot}

Router Event: GuardsCheckStart
GuardsCheckStart(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } )
GuardsCheckStart {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot}

Router Event: ChildActivationStart
ChildActivationStart(path: '')
ChildActivationStart {snapshot: ActivatedRouteSnapshot}

Router Event: ActivationStart
ActivationStart(path: 'Profile')
ActivationStart {snapshot: ActivatedRouteSnapshot}

Router Event: GuardsCheckEnd
GuardsCheckEnd(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } , shouldActivate: true)
GuardsCheckEnd {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot, shouldActivate: true}

Router Event: ResolveStart
ResolveStart(id: 2, url: '/Account/Profile', urlAfterRedirects: '/Account/Profile', state: Route(url:'', path:'') { Route(url:'Account', path:'Account') { Route(url:'Profile', path:'Profile') }  } )
ResolveStart {id: 2, url: "/Account/Profile", urlAfterRedirects: "/Account/Profile", state: RouterStateSnapshot}

因此，看起來ResolveEnd事件永遠不會觸發。 我發現了這個問題： 如果模塊為lazy，則路由器的ActivatedRoute data返回空{} 。 似乎可能是相關的，但我不確定如何在此實施此修復程序。

Answer 1

我再次查閱了“ 路由和導航”指南，並更改了我的解析器，使其看起來像在這里一樣：

profile.resolver.ts

@Injectable()
export class ProfileResolver implements Resolve<Profile> {

  constructor(private readonly accountService: AccountService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> {
    return this.accountService.profile().pipe(
      take(1),
      map((profile: Profile) => profile));
  }
}

關鍵是添加take(1) 。 沒有此操作，將永遠不會觸發ResolveEnd事件，而Router只會掛起。

Answer 2

我認為您必須訂閱解析器承諾

@Component({
⋮
})
export class ProfileComponent implements OnInit {

  model: Profile;

  constructor(private readonly route: ActivatedRoute) {
  }

  ngOnInit(): void {

    this.router.data.subscribe( (data) => { <== here 
      this.model = data as Profile  <== here
    });
  }
}