Angular에서 활성 경로를 어떻게 결정합니까?
참고 : 여기에는 여러 가지 답변이 있으며 대부분 한 번에 유효합니다. 사실 Angular 팀이 라우터를 변경함에 따라 작동하는 내용이 여러 번 변경되었습니다. 결국 Angular 에서 라우터 가 될 Router 3.0 버전 은 이러한 솔루션 중 많은 부분을 손상 시키지만 자체적으로 매우 간단한 솔루션을 제공합니다. RC.3부터 선호되는 솔루션은 이 답변에[routerLinkActive] 표시된대로 사용 하는 것 입니다.
Angular 응용 프로그램 (이 글을 쓸 때 2.0.0-beta.0 릴리스에서 현재)에서 현재 활성 경로가 무엇인지 어떻게 결정합니까?
Bootstrap 4를 사용하는 앱을 개발 중이며 관련 구성 요소가 <router-output>태그 에 표시 될 때 탐색 링크 / 버튼을 활성으로 표시하는 방법이 필요합니다 .
버튼 중 하나를 클릭하면 상태를 직접 유지할 수 있지만 동일한 경로에 여러 경로가있는 경우 (주 탐색 메뉴 및 주 구성 요소의 로컬 메뉴와 같은 경우)에는 적용되지 않습니다. ).
어떤 제안이나 링크를 부탁드립니다. 감사.
새로운 Angular 라우터 를 사용하면 [routerLinkActive]="['your-class-name']"모든 링크에 속성을 추가 할 수 있습니다 .
<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>
또는 하나의 클래스 만 필요한 경우 단순화 된 비 배열 형식 :
<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>
또는 하나의 클래스 만 필요한 경우 훨씬 간단한 형식 :
<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>
자세한 내용은 잘못 문서화 된 routerLinkActive지시문 을 참조하십시오. (나는 주로 시행 착오를 통해 이것을 알아 냈습니다.)
업데이트 : routerLinkActive지시문에 대한 더 나은 문서를 여기 에서 찾을 수 있습니다 . (아래 의견에 @Victor Hugo Arango A.에게 감사드립니다.)
나는 다른 질문에 이것을 대답했지만 이것과도 관련이 있다고 생각합니다. 다음은 원래 답변에 대한 링크입니다. 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>
이것은 지금까지 문제에 대한 선호되는 해결책이었습니다.도 도움이 될 수 있습니다.
이 링크 에서 발생한 문제를 해결했으며 귀하의 질문에 대한 간단한 해결책이 있음을 알게되었습니다. router-link-active대신 스타일을 사용할 수 있습니다 .
@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
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>
Location객체를 컨트롤러 에 주입하고을 확인하여 현재 경로를 확인할 수 있습니다 path().
class MyController {
constructor(private location:Location) {}
... location.path(); ...
}
먼저 가져와야합니다.
import {Location} from "angular2/router";
그런 다음 정규식을 사용하여 반환 된 경로와 일치하여 활성화 된 경로를 확인할 수 있습니다. 점을 유의 Location클래스가 어떤 관계없이 표준화 된 경로를 반환 LocationStrategy당신이 사용하고 있습니다. 따라서 HashLocationStragegy경로를 사용하더라도 반환 된 경로는 여전히 형식이 /foo/bar 아닙니다 #/foo/bar
현재 활성화 된 경로가 무엇인지 어떻게 알 수 있습니까?
업데이트 : 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 [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한 RC.4에서 기본값이 될 것입니다.
지금은 부트 스트랩 4와 함께 rc.4를 사용하고 있으며 이것은 나에게 완벽하게 작동합니다.
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home</a>
</li>
이것은 URL에서 작동합니다 : / home
다음은 현재 경로에 따라 RouteData를 사용하여 menuBar 항목의 스타일을 지정하는 방법입니다.
RouteConfig에는 탭 (현재 경로)이있는 데이터가 포함됩니다.
@RouteConfig([
{
path: '/home', name: 'Home', component: HomeComponent,
data: {activeTab: 'home'}, useAsDefault: true
}, {
path: '/jobs', name: 'Jobs', data: {activeTab: 'jobs'},
component: JobsComponent
}
])
레이아웃 조각 :
<li role="presentation" [ngClass]="{active: isActive('home')}">
<a [routerLink]="['Home']">Home</a>
</li>
<li role="presentation" [ngClass]="{active: isActive('jobs')}">
<a [routerLink]="['Jobs']">Jobs</a>
</li>
수업:
export class MainMenuComponent {
router: Router;
constructor(data: Router) {
this.router = data;
}
isActive(tab): boolean {
if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
}
return false;
}
}
여기에 각도 버전의 활성 경로 스타일을 추가하는 완벽한 예입니다 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 RC 4 솔루션 :
import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';
export function isRouteActive(router: Router, route: string) {
const currentUrlTree = router.parseUrl(router.url);
const routeUrlTree = router.createUrlTree([route]);
return containsTree(currentUrlTree, routeUrlTree, true);
}
RouterAngular 2 RC에서는 더 이상 정의 isRouteActive및 generate방법이 없습니다 .
urlTree-현재 URL 트리를 반환합니다.
createUrlTree(commands: any[], segment?: RouteSegment)-현재 URL 트리에 명령 배열을 적용하고 새 URL 트리를 만듭니다.
다음을 시도하십시오
<li
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">
통지는, routeSegment : RouteSegment구성 요소의 생성자에 주입해야합니다.
typescript를 사용하지 않는 예제를 추가하려고 생각했습니다.
<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
routerLinkActive변수 템플릿 변수에 결합 된 후, 필요에 따라 사용되는 재. 불행히도 유일한 경고는 파서가 치기 전에 해결해야 하므로 <section>요소 에이 모든 것을 가질 수 없다는 것 입니다.#home<section>
또 다른 해결 방법. 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>
Angular2 RC2에서는이 간단한 구현을 사용할 수 있습니다
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
activeURL이 일치하는 요소 에 클래스 를 추가 합니다. 자세한 내용은 여기를 참조하십시오.
다음은 지금까지 출시 된 모든 버전의 Angular 2 RC 버전에 대한이 질문에 대한 답변입니다.
RC4 및 RC3 :
링크 또는 링크의 조상에 클래스를 적용하는 경우 :
<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>
라우터 속성 v3에서 이름 속성이 더 이상 Route 객체에 존재하지 않으므로 / home은 경로 이름이 아닌 URL이어야합니다.
이 링크의 routerLinkActive 지시문에 대한 추가 정보 .
현재 경로를 기반으로 모든 div에 클래스를 적용하려면 :
- 라우터를 컴포넌트 생성자에 삽입하십시오.
- 비교할 사용자 router.url.
예 :
<nav [class.transparent]="router.url==('/home')">
</nav>
RC2 및 RC1 :
router.isRouteActive와 class. *의 조합을 사용하십시오. 예를 들어, 홈 루트를 기반으로 액티브 클래스를 적용합니다.
이름과 URL은 router.generate로 전달 될 수 있습니다.
<li [class.active]="router.isRouteActive(router.generate(['Home']))">
<a [routerLink]="['Home']" >Home</a>
</li>
routerLinkActive링크가 있고 일부 클래스를 적용하려는 간단한 경우에 사용하는 것이 좋습니다. 그러나 더 복잡한 경우 routerLink가 없거나 파이프가 더 필요하고 더 필요한 것이 필요한 경우 :
@Pipe({
name: "isRouteActive",
pure: false
})
export class IsRouteActivePipe implements PipeTransform {
constructor(private router: Router,
private activatedRoute: ActivatedRoute) {
}
transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
if (!options) options = {};
if (options.exact === undefined) options.exact = true;
const currentUrlTree = this.router.parseUrl(this.router.url);
const urlTree = this.router.createUrlTree(route, {
relativeTo: this.activatedRoute,
queryParams: options.queryParams,
fragment: options.fragment
});
return containsTree(currentUrlTree, urlTree, options.exact);
}
}
그때:
<div *ngIf="['/some-route'] | isRouteActive">...</div>
파이프 종속성에 파이프를 포함시키는 것을 잊지 마십시오.)
Angular 버전 4+의 경우 복잡한 솔루션을 사용할 필요가 없습니다. 당신은 단순히 사용할 수 있습니다 [routerLinkActive]="'is-active'".
부트 스트랩 4 탐색 링크가있는 예 :
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About Us</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " routerLink="/contact-us">Contact</a>
</li>
</ul>
Router 클래스의 인스턴스는 실제로 Observable이며 변경 될 때마다 현재 경로를 반환합니다. 이것이 내가하는 방법입니다.
export class AppComponent implements OnInit {
currentUrl : string;
constructor(private _router : Router){
this.currentUrl = ''
}
ngOnInit() {
this._router.subscribe(
currentUrl => this.currentUrl = currentUrl,
error => console.log(error)
);
}
isCurrentRoute(route : string) : boolean {
return this.currentUrl === route;
}
}
그리고 내 HTML에서 :
<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>
허용 된 답변의 의견 중 하나에서 언급했듯이 routerLinkActive지시문은 실제 <a>태그 의 컨테이너에도 적용될 수 있습니다 .
예를 들어 Twitter 부트 스트랩 탭을 사용<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>
꽤 깔끔한 ! 나는 지시가의 태그와 외모의 내용을 검사 가정 <a>와 태그 routerLink지시를.
Angular2에서 Twitter Bootstrap 스타일 탐색을 사용하는 방법을 찾고 있었지만 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 ){}
}
활성 상태 / 탭에 CSS를 추가한다고 가정 해 봅시다. 사용 routerLinkActive는 라우팅 링크를 활성화합니다.
참고 : 'active'는 여기 내 수업 이름입니다.
<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지침은 통해 경로와 관련된 routerLink지시어.
라우트가 현재 활성화되어있는 경우 연결된 요소에 추가 할 클래스 배열을 입력으로 사용합니다.
<li class="nav-item"
[routerLinkActive]="['active']">
<a class="nav-link"
[routerLink]="['home']">Home
</a>
</li>
위는 홈 경로를보고있는 경우 앵커 클래스에 활성 클래스를 추가합니다.
각도 라우터를 사용 ^3.4.7하고 있는데 routerLinkActive지시문에 여전히 문제가 있습니다.
동일한 URL을 가진 여러 개의 링크가 있고 항상 새로 고침되지 않는 경우 작동하지 않습니다.
@tomaszbak 답변에서 영감을 얻어 작업을 수행 하는 작은 구성 요소 를 만들었습니다.
순수한 HTML 템플릿
<a [routerLink]="['/home']" routerLinkActive="active">Home</a>
<a [routerLink]="['/about']" routerLinkActive="active">About us</a>
<a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>
.ts에서 RouterLinkActive 가져 오기로 시작하십시오.
'@ angular / router'에서 {RouterLinkActive} 가져 오기;
이제 HTML에서 RouterLinkActive를 사용하십시오.
<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>
이 링크가 활성화 / 클릭 될 때 검사하는 동안이 클래스를 찾을 수 있으므로 "class_Name"클래스에 CSS를 제공하십시오.
Angular 8부터는 다음과 같이 작동합니다.
<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']">Home</a>
</li>
{ exact: true } URL과 일치하는지 확인하십시오.
그리고 최신 버전의 각도에서는 간단히 확인할 수 있습니다 router.isActive(routeNameAsString). 예를 들어 아래 예를 참조하십시오.
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item" [class.active] = "router.isActive('/dashboard')">
<a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
<a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
[matMenuTriggerFor]="menu">{{route.name}}</a>
<a class="nav-link" href="{{route.path}}"
*ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
<mat-menu #menu="matMenu">
<span *ngIf="route.childRoutes && route.childRoutes.length > 0">
<a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
mat-menu-item>{{child.name}}</a>
</span>
</mat-menu>
</li>
</ul>
<span class="navbar-text mr-auto">
<small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
{{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
</span>
</div>
그리고 구성 요소에 라우터를 주입하는 것을 잊지 마십시오.
참고 URL : https://stackoverflow.com/questions/34323480/in-angular-how-do-you-determine-the-active-route
'Programing' 카테고리의 다른 글
| SELECT로 삽입 (0) | 2020.03.29 |
|---|---|
| 브라우저가 캐시를 지우도록 강제 (0) | 2020.03.29 |
| 문자열을 연결하는 가장 효율적인 방법은 무엇입니까? (0) | 2020.03.29 |
| javac가 "확인되지 않거나 안전하지 않은 작업 사용"경고를 발생시키는 원인 (0) | 2020.03.29 |
| PDOException“드라이버를 찾을 수 없습니다” (0) | 2020.03.29 |