Question

我有一个Angular 6应用程序，并且我的根组件中需要一些API调用数据。

我正在尝试使用RouteResolvers，但无法使其正常工作。

const routes: Routes = [
  {path: '', redirectTo: 'landingPage', pathMatch: 'full', resolve: {items: AuthRouteResolver}},
  {path: 'landingPage', component: LandingComponent, resolve: {items: AuthRouteResolver}},
  {path: 'modeler', component: ModelerComponent, canActivate: [AuthGuard]},
  {path: 'Dashboard', component: DashboardComponent, canActivate: [AuthGuard]}
];

AuthRouteResolver.ts

import {Injectable} from '@angular/core';
import {Resolve} from '@angular/router';

import {Observable} from 'rxjs';

import {AuthService} from '../services/authService.service';

@Injectable()
export class AuthRouteResolver implements Resolve<Observable<any>> {

  constructor(
    private _auth: AuthService
  ) {
  }

  resolve() {
    return this._auth.getAuthCorpID();
  }
}

app.component.html

    <router-outlet></router-outlet>
    <div id="footer">
      <div id="homepage">
        <button mat-button color="primary">
          <a (click)="clickedUrl()">Homepage</a>
        </button>
      </div>

      <div id="login-info">
        <span>Logged in as: </span>
        <span class="name">{{firstname}}</span>
        <span class="corpId">{{corpid}}</span>
      </div>

      <div id="feedback">
        <button mat-button color="primary" (click)="openDialog()">
          <span class="ng-scope">Feedback</span>
        </button>
      </div>
    </div>

我希望AuthRouteResolver中的数据在此组件中。

我可以在LandingComponent中获取数据，但不能在此处获取。请指教。

Answer 1

由解析器解析的数据位于活动路由中。

在组件构造函数中注入 private route：ActiveRoute 并查找

this.route.snapshot.data ['items'] ;

有时（取决于路由器的结构），您必须查看父路由

this.route.parent.snapshot.data ['items'] ;

我会做一个console.log并尝试找到正确的位置

路径解析根组件角度6

1 个答案: