[javascript] Angular에서 활성 경로를 어떻게 결정합니까?

나는 다른 질문에 이것을 대답했지만 이것과도 관련이 있다고 생각합니다. 다음은 원래 답변에 대한 링크입니다.
Angular 2 : 매개 변수로 활성 경로를 결정하는 방법?

현재 위치가 무엇인지 정확히 알 필요없이 활성 경로 를 설정하려고했습니다 (경로 이름 사용) . 지금까지 내가 얻은 최고의 솔루션 은 클래스 에서 사용 가능한 isRouteActive 함수를 사용하는 것 Router입니다.

router.isRouteActive(instruction): Boolean경로입니다 하나 개의 매개 변수 소요 Instruction객체 반환 true또는 false현재의 경로에 대한 그 명령이 참 보유 여부를. 의 generate (linkParams : Array)Instruction 를 사용하여 경로 를 생성 할 수 있습니다 . LinkParams는 routerLink 지시문에 전달 된 값과 정확히 같은 형식을 따릅니다 (예 🙂 .Routerrouter.isRouteActive(router.generate(['/User', { user: user.id }]))

이것은 RouteConfig 가 어떻게 보일 수 있는지 입니다 (params 사용법을 보여주기 위해 약간 조정했습니다) .

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

그리고 보기는 다음과 같을 것이다 :

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

이것은 지금까지 문제에 대한 선호되는 해결책이었습니다.도 도움이 될 수 있습니다.

답변

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

import {Location} from "angular2/router";

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"