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


Answers

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

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

router.isRouteActive(instruction): Boolean 은 경로 Instruction 객체 인 하나의 매개 변수를 취해 현재 경로에 대해 해당 명령이 false 인지 여부를 나타내는 true 또는 false 반환합니다. Routergenerate (linkParams : Array) 를 사용하여 route Instruction 를 생성 할 수 있습니다. LinkParams는 routerLink 지시문에 전달 된 값과 정확히 같은 형식을 routerLink (예 : router.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>

이것은 지금까지 문제에 대한 나의 선호 된 해결책이었으며, 그것은 당신에게도 도움이 될 수 있습니다.

Question

참고 : 여기에는 여러 가지 답변이 있으며 대부분은 한 번에 유효합니다. 사실 Angular 팀이 라우터를 변경함에 따라 수 차례 변경된 작업이있었습니다. 궁극적으로 Angular 라우터가 될 Router 3.0 버전은 이러한 솔루션 중 많은 부분을 해치지 만 매우 간단한 솔루션을 제공합니다. RC.3에서, 이 해답 에서 보듯 이 [routerLinkActive] 를 사용하는 것이 가장 좋은 해결책입니다.

Angular 애플리케이션 (2.0.0-beta.0 릴리스의 현재 버전)에서는 현재 활성 경로가 무엇인지 어떻게 결정합니까?

부트 스트랩 4를 사용하는 앱을 만들고 있는데, 관련된 컴포넌트가 <router-output> 태그에 표시 될 때 탐색 링크 / 버튼을 활성화로 표시하는 방법이 필요합니다.

단추 중 하나를 클릭 할 때 상태를 유지할 수 있다는 것을 알았지 만 동일한 경로에 여러 경로가있는 경우에는 해당되지 않습니다 (기본 탐색 메뉴는 물론 주 구성 요소의 로컬 메뉴라고도 함). ).

모든 제안이나 링크를 부탁드립니다. 감사.




다음은 날짜까지 출시 된 Angular 2 RC 버전의 모든 버전에 대한이 질문에 대한 답변입니다.

RC4 및 RC3 :

링크 또는 링크의 조상에 수업 적용 :

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ home은 route v3의 Route Object에 name 속성이 더 이상 존재하지 않으므로 route의 이름이 아니라 URL이어야합니다.

here 에서 routerLinkActive 지시문에 대해 자세히 설명 here .

현재 경로를 기반으로 모든 div에 클래스를 적용하는 경우 :

  • 라우터를 구성 요소 생성자에 삽입하십시오.
  • 비교를 위해 사용자 router.url.

<nav [class.transparent]="router.url==('/home')">
</nav>

RC2 및 RC1 :

router.isRouteActive와 class. *의 조합을 사용하십시오. 예를 들어 Home Route를 기반으로 활성 클래스를 적용합니다.

이름과 URL은 둘 다 router.generate로 전달 될 수 있습니다.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>



Location 객체를 컨트롤러에 삽입하고 path() 확인하여 현재 경로를 확인할 수 있습니다.

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

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

먼저 가져 오기를해야합니다.

import {Location} from "angular2/router";

그런 다음 정규 표현식을 사용하여 리턴 된 경로와 일치시켜 어떤 경로가 활성 상태인지 확인할 수 있습니다. Location 클래스는 사용중인 LocationStrategy 와 관계없이 정규화 된 경로를 반환합니다. 따라서 HashLocationStragegy 사용하더라도 반환 된 경로는 여전히 #/foo/bar 아닌 #/foo/bar




내가 Angular2와 트위터 부트 스트랩 스타일 탐색을 사용하는 방법을 찾고 있었지만 선택한 링크의 부모 요소에 active 클래스를 적용하는 데 문제가있었습니다. @ alex-correia-santos의 솔루션이 완벽하게 작동한다는 것을 알았습니다!

탭이 포함 된 구성 요소는 필요한 호출을하기 전에 라우터를 가져 와서 생성자에서 정의해야합니다.

내 구현의 단순화 된 버전은 다음과 같습니다.

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}



다음은 널 루트 경로 (예 : path: '/' )를 고려한 각도 버전 2.0.0-rc.1 에서 활성 경로 스타일을 추가하는 완전한 예입니다 path: '/'

app.component.ts -> 경로

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>



현재 활성 경로가 무엇인지 어떻게 결정합니까?

업데이트 : Angular2.4.x에 따라 업데이트 됨

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
}

더보기...




허용 된 답변의 주석 중 하나에서 언급 한 바와 같이, routerLinkActive 지시어는 실제 <a> 태그의 컨테이너에도 적용될 수 있습니다.

예를 들어 Twitter Bootstrap 탭 에서 링크가 포함 된 <li> 태그에 활성 클래스를 적용해야합니다.

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

꽤 깔끔한 ! 지시어가 태그의 내용을 검사하고 routerLink 지시어로 <a> 태그를 routerLink 합니다.




routerLinkActive 사용할 수있는 활성 경로를 표시하려면

<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 }"

지금까지 내가 아는 한 exact: false RC4에서 exact: false 가 기본값이 될 것입니다.




지금은 부트 스트랩 4와 함께 rc.4를 사용하고 있으며,이 하나의 완벽한 작품 :

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

이것은 URL에 대해 작동합니다 : / home




각도 5 사용자를위한 간단한 솔루션은 routerLinkActive 를 목록 항목에 추가하는 routerLinkActive 입니다.

routerLinkActive 지시문은 routerLinkActive 지시문을 통해 경로와 연결됩니다.

그것은 경로가 현재 활성화되어 있다면 그것이 첨부 된 요소에 추가 할 클래스의 배열을 입력으로받습니다.

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

위의 예는 현재 홈 경로를보고있는 경우 앵커 태그에 활성 클래스를 추가합니다.




다른 해결 방법. Angular Router V3 Alpha에서 훨씬 더 편리합니다. 라우터를 주입하여

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

용법

<div *ngIf="routeIsActive('/')"> My content </div>



각도 라우터 ^3.4.7 하고 있으며 routerLinkActive 지시문에 여전히 문제가 있습니다.

같은 URL에 여러 개의 링크가 있고 항상 새로 고치는 것처럼 보이지 않는 경우 작동하지 않습니다.

@ tomaszbak 대답에서 영감을 얻어 작업을 수행하기위한 작은 구성 요소 를 만들었습니다.




Links