은 어떻게하는 라우터 링크를 기반으로 조건부 코드를 작성 할 수는

Question

내 시도가이처럼 활성화 :

<ul class="nav nav-tabs search-selector" role="tablist"> 
    <li routerLinkActive="active" 
    [routerLinkActiveOptions]="{ exact: true }"> 
    <a routerLink="{{ myroute[0].link }}">{{ myroute[0].label }}</a> 
    </li> 
    <li routerLinkActive="active" 
    [routerLinkActiveOptions]="{ exact: true }"> 
    <a routerLink="{{ myroute[1].link }}">{{ myroute[1].label }}</a> 
    </li> 
</ul> 
<div *ngif="route0 is active">do something related to route 0</div> 
<div *ngif="route1 is active">do something related to route 1</div> 

Answer 1

당신이 길을 통과하고 뭔가를 렌더링 NgIf, 유사 자신의 구조 지시어를 만들 수 있습니다

DOM 활성 경로는 다음과 같이 당신이 지시문에 전달 하나, 뭔가 일치하는 경우 :

경우-route.directive.ts을

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Subscription } from 'rxjs/Subscription'; 

@Directive({ selector: '[ifRoute]' }) 
export class IfRouteDirective { 

    private hasView = false; 
    private subscription: Subscription; 

    constructor(
    private templateRef: TemplateRef<any>, 
    private viewContainer: ViewContainerRef, 
    private router: Router) { } 

    @Input() set ifRoute(route: string) { 
    this.performCheck(route); 

    this.subscription = this.router.events.subscribe(
     res => { 
     this.performCheck(route); 
     } 
    ) 
    } 

    performCheck(route) { 
    if (route === this.router.url && !this.hasView) { 
     this.viewContainer.createEmbeddedView(this.templateRef); 
     this.hasView = true; 
    } else if (route !== this.router.url && this.hasView) { 
     this.viewContainer.clear(); 
     this.hasView = false; 
    }; 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

당신은 당신의 템플릿에 다음과 같이 사용합니다 :

<p *ifRoute="'/login'"> 
    This will be displayed only if you are on login route. 
</p> 

Answer 2

@의 스테판 - svrkota의 대답은 훌륭하지만 *ngIf="router.url=='/login'"도