1

ngrx/routerを使用しています。

4ページあります。そのうちの 2 つは/admin/dashboard管理/admin/management者アクセスが必要です。

/home
/products

/admin/dashboard
/admin/management

[ユーザー] と [管理者] をクリックして、ユーザービューと管理者ビューを切り替えることができます。

<li linkActive="active">
  <a linkTo="/home">User</a>
</li>
<li linkActive="active">
  <a linkTo="/admin/dashboard">Admin</a>
</li>

/homeとにいるときは、ユーザーをアクティブにし/productsたい。の場合のみアクティブになります。/home

同様に、 と にいるときは、/admin/dashboard管理者をアクティブにし/admin/managementたいです。の場合のみアクティブになります。/admin/dashboard

どうやってやるの？ありがとう

4

1 に答える 1

1

@brandonroberts からの助けに感謝します。

アクティブなリンクはパスに基づいているため/home、 と/productsを同時にアクティブにすることはできません。

/home同じの/products下にリンクがある場合を除きますli。

次に、それらのいずれかがアクティブな場合、アクティブなクラスを追加します。

だから私はこの解決策で終わります: using isAdminPagein AdminServiceinside of AdminGuard.

@Injectable()
export class AdminService {
  isAdminPage: boolean = false;
}


@Injectable()
export class AdminGuard implements Guard {
  constructor(
    private _router: Router,
    private _userService: UserService,
    private _adminService: AdminService) {}

  protectRoute(candidate: TraversalCandidate): Observable<boolean> {
    return this._userService.checkAdmin()
      .map(isAdmin => {
        if (!isAdmin) {
          this._router.replace('/home');
          return false;
        } else {
          this._adminService.isAdminPage = true;
          return true;
        }
      }).first();
  }
}

次に_adminService.isAdminPage、検出に使用します。

<li class="nav-item" [class.active]="!_adminService.isAdminPage">
  <a class="nav-link" linkTo="/home">user</a>
</li>
<li class="nav-item" [class.active]="_adminService.isAdminPage">
  <a class="nav-link" linkTo="/admin/dashboard">admin</a>
</li>
于 2016-06-04T03:22:34.473 に答える