Angular에서 활성 경로를 결정하려면 어떻게 해야 합니까?
주의: 여기에는 다양한 답변이 있으며, 대부분은 한 번 또는 여러 번 유효합니다.사실은 Angular 팀이 Router를 변경함에 따라 작동하는 것이 여러 번 바뀌었습니다.최종적으로 Angular에서 라우터가 되는 라우터 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>
또는 클래스가 1개만 필요한 경우 보다 간단한 형식입니다.
<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>
자세한 내용은 문서화된 지침을 참조하십시오(대부분 시행착오를 통해 파악했습니다).
더 나은 : " " " " " " : "routerLinkActive디렉티브는 여기서 확인할 수 있습니다.(아래 코멘트의 @Victor Hugo Arango A.덕분에)
다른 질문으로 답변을 드렸습니다만, 이것도 관련이 있을 것으로 생각합니다.여기 원래의 답변에 대한 링크가 있습니다.각도 2: 파라미터를 사용하여 활성화 경로를 판별하는 방법
현재 위치를 정확히 알 필요 없이(루트 이름을 사용하여) 액티브클래스를 설정하려고 했습니다.지금까지 얻은 솔루션 중 가장 좋은 것은 에서 사용할 수 있는 isRouteActive 함수를 사용하는 것입니다.Router를 누릅니다
router.isRouteActive(instruction): Boolean는 루트 1)를 .Instruction 및 한다.true ★★★★★★★★★★★★★★★★★」false현재 경로에 대해 해당 명령이 적용되는지 여부를 확인합니다.할 수 .Instruction를 사용하여Router의 generate(link Params: 어레이).LinkParams는 routerLink 디렉티브에 전달된 값과 동일한 형식을 따릅니다(예:router.isRouteActive(router.generate(['/User', { user: user.id }]))를 참조해 주세요.
Route Config는 다음과 같습니다(파라미터의 사용법을 표시하기 위해 조금 조정했습니다).
@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>
이것이 지금까지의 문제 해결 방법이었기 때문에, 당신에게도 도움이 될지도 모릅니다.
https://github.com/angular/angular/pull/6407#issuecomment-190179875을 기반으로 한 @correia-correia-correa 답변에 대한 약간의 개선 사항
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>
저는 이 링크에서 발생한 문제를 해결했고, 당신의 질문에 대한 간단한 해결책이 있다는 것을 알게 되었습니다.사용할 수 있습니다.router-link-active대신 네 스타일대로.
@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
하려면 , 「경로」를 .Location합니다.path()다음과 같이 합니다.
class MyController {
constructor(private location:Location) {}
... location.path(); ...
}
먼저 Import해야 합니다.
import {Location} from "angular2/router";
그런 다음 정규 표현을 사용하여 반환된 경로와 대조하여 활성 경로를 확인할 수 있습니다.에 주의:Location 종류에 합니다.LocationStrategy사용하고 있습니다. 이 이 말을 됩니다.HashLocationStragegy the환 、 환 the 、 the the 、 the the the the the the the the the 。/foo/bar 않다 #/foo/bar
루트를 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: falseRC.4RC.4에서는 가 됩니다.
현재 액티브한 루트가 무엇인지 어떻게 판단합니까?
갱신: 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
}
Angular 8에서는 다음과 같이 동작합니다.
<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']">Home</a>
</li>
{ exact: true }합니다.
2020년에 [routerLink]가 없는 요소에 액티브 클래스를 설정하려는 경우 다음과 같이 간단히 수행할 수 있습니다.
<a
(click)="bookmarks()"
[class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
bookmarks
</a>
지금은 부트스트랩4와 함께 rc.4를 사용하고 있는데, 이것은 저에게 딱 맞습니다.
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home</a>
</li>
이것은 url: /home에서 동작합니다.
타이프 스크립트를 사용하지 않는 예를 추가하려고 합니다.
<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
routerLinkActive변수는 템플릿 변수에 바인딩된 후 필요에 따라 다시 사용됩니다.유감스럽게도 유일한 경고는 이 모든 것을 웹 사이트에 저장할 수 없다는 것입니다.<section>로서 구성하다.#home파서가 히트하기 전에 해결해야 합니다.<section>.
다음으로 RouteData를 사용하여 현재 루트에 따라 menuBar 항목을 스타일링하는 방법을 나타냅니다.
Route Config에는 탭(현재 루트)이 있는 데이터가 포함됩니다.
@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;
}
}
Router Angular 2 RC에서 더 이상 정의하지 않음isRouteActive ★★★★★★★★★★★★★★★★★」generate★★★★★★★★★★★★★★★★★★.
urlTree트리를 합니다.- URL 리 - - 。
createUrlTree(commands: any[], segment?: RouteSegment)- 트리에 하고 새 트리를 URL 。
팔로잉을 시도하다
<li
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">
★★★routeSegment : RouteSegment구성 요소의 생성자에 주입해야 합니다.
버전에서의 2.0.0-rc.1 null 루트 경로)를 고려합니다.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.module
<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);
}
이것은 액티브/비액티브루트에 도움이 되었습니다.
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>
다른 회피책앵귤러 라우터 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>
/home은 Router v3에서 Route Object에 이름 속성이 존재하지 않게 되었기 때문에 루트의 이름이 아닌 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 nav 링크의 예:
<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>
angular의 angular를 할 수 .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>
또, 컴포넌트에 라우터를 삽입하는 것을 잊지 말아 주세요.
라우터 클래스의 인스턴스는 실제로 관찰 가능한 것이며 변경될 때마다 현재 경로를 반환합니다.방법은 다음과 같습니다.
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 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>
깔끔하네요!하고, 「이러다!」를 것 같습니다.<a>를 달다routerLink★★★★★★ 。
은 단지 5를 더하는 routerLinkActive목록 항목으로 이동합니다.
A routerLinkActive는 디렉티브를 .routerLink★★★★★★ 。
다음과 같이 루트가 현재 활성화되어 있는 경우 연결된 요소에 추가할 클래스 배열을 입력으로 받습니다.
<li class="nav-item"
[routerLinkActive]="['active']">
<a class="nav-link"
[routerLink]="['home']">Home
</a>
</li>
상기에서는 현재 홈루트를 표시하고 있는 경우 활성화클래스가 앵커태그에 추가됩니다.
Twitter , Angular2의 Twitter Bootstrap을 데 .active선택한 링크의 부모 요소에 적용되는 클래스입니다.@correia-correia-correia-correia-correia-correia 의의reia-!의reia- @ @re @ @ @ @ @ @ @ @ @ @ @ @ @ @!
탭을 포함하는 컴포넌트는 라우터를 Import하여 컨스트럭터에서 정의해야 필요한 콜을 발신할 수 있습니다.
여기 구현의 간략한 버전이 있습니다.
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>
프로그램적인 방법은 컴포넌트 자체에서 실행하는 것입니다.이 문제에 대해 3주 동안 고민했지만 각도 도크를 포기하고 routerlinkactive를 작동시킨 실제 코드와 그것이 내가 찾을 수 있는 최고의 도서에 대한 내용을 읽었습니다.
import {
Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
from '@angular/core';
import { Location } from '@angular/common';
import { Subscription } from 'rxjs';
import {
ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{
public previousUrl: any;
private subscription: Subscription;
@ViewChild("superclass", { static: false } as any) superclass: ElementRef;
@ViewChildren("megaclass") megaclass: QueryList<ElementRef>;
constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
this.subscription = router.events.subscribe((s: Event) => {
if (s instanceof NavigationEnd) {
this.update();
}
});
}
ngOnInit(){
}
ngAfterViewInit() {
}
ngAfterContentInit(){
}
private update(): void {
if (!this.router.navigated || !this.superclass) return;
Promise.resolve().then(() => {
this.previousUrl = this.router.url
this.megaclass.toArray().forEach( (superclass) => {
var superclass = superclass
console.log( superclass.nativeElement.children[0].classList )
console.log( superclass.nativeElement.children )
if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
this.renderer.addClass(superclass.nativeElement.children[0], "box")
console.log("add class")
} else {
this.renderer.removeClass(superclass.nativeElement.children[0], "box")
console.log("remove class")
}
});
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }
//class is done
}
주의:
프로그램 방식으로는 반드시 라우터 링크를 추가해 주세요.이 링크에는 자 요소가 필요합니다., 걸걸 on on if if if if if if if if if if if if if if if if 。superclass.nativeElement.
라우터를 ^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>
언급URL : https://stackoverflow.com/questions/34323480/in-angular-how-do-you-determine-the-active-route
'programing' 카테고리의 다른 글
| JavaScript 문자열에서 숫자를 추출하려면 어떻게 해야 합니까? (0) | 2022.09.29 |
|---|---|
| 413 요구 엔티티가 너무 크다 - 파일 업로드 문제 (0) | 2022.09.29 |
| 조인된 테이블에 LIMIT 1이 있는 MySQL JOIN (0) | 2022.09.29 |
| 지리적 근접도를 계산하는 공식 (0) | 2022.09.29 |
| Mac bash 명령줄에서 Gradle을 실행하는 방법 (0) | 2022.09.29 |