javascript 앵귤러5 앵귤러 - Angular에서 활성 경로를 어떻게 결정합니까?





13 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>

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

angularjs angularjs2 install

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

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

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

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

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




https://github.com/angular/angular/pull/6407#issuecomment-190179875 기반으로 한 @ alex-correia-santos 응답의 작은 개선

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>



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

업데이트 : 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
}

더보기...




다음은 널 루트 경로 (예 : 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>



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

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

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




각도 2의 Router 는 더 이상 isRouteActive 정의하지 않으며 메소드를 generate 하지 않습니다.

urlTree - 현재 url 트리를 반환합니다.

createUrlTree(commands: any[], segment?: RouteSegment) - 명령의 배열을 현재 url 트리에 적용하고 새 URL 트리를 만듭니다.

다음을 시도해보십시오.

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

notice, routeSegment : RouteSegment 를 구성 요소의 생성자에 삽입해야합니다.




다른 해결 방법. 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>



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

RC4 및 RC3 :

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

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

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

angular.io/docs/ts/latest/api/router/index/… 에서 routerLinkActive 지시문에 대해 자세히 설명 angular.io/docs/ts/latest/api/router/index/… .

현재 경로를 기반으로 모든 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>



허용 된 답변의 주석 중 하나에서 언급 한 바와 같이, 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 합니다.




그냥 typescript를 사용하지 않는 예제를 추가 할 것이라고 생각했습니다.

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

routerLinkActive 변수는 템플릿 변수에 바인딩 된 다음 필요에 따라 다시 사용됩니다. 불행하게도 유일한주의 사항은 파서가 <section> 치기 전에 #home 을 해결해야하므로 <section> 요소에서이 모든 것을 가질 수 없다는 것입니다.




활성 상태 / 탭에 CSS를 추가하려고한다고 가정 해 보겠습니다. routerLinkActive 를 사용하여 라우팅 링크를 활성화하십시오.

참고 : '활성'은 여기 내 수업 이름입니다.

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>



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

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

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

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

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




.ts에서 RouterLinkActive를 가져 오기부터 시작하십시오.

'@ angle / router'에서 {RouterLinkActive} 가져 오기;

이제 귀하의 HTML에서 RouterLinkActive를 사용하십시오.

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

클래스 "class_Name"에 약간의 CSS를 제공하십시오.이 링크가 활성화 / 클릭 될 때 검사 중에이 클래스를 span에서 찾을 수 있습니다.




Related