アンカージャンプを使ってAngular 4でブートストラップnavbar "active"クラスを設定するには？

Question

私はこの質問を見ました：別のページにリンクする方法を示すHow to set Bootstrap navbar “active” class in Angular 2?。しかし、私の場合、同じページのセクションにアンカーを使用してリンクしたいと考えています。

以下のコードでは、文字列の補間をエスケープしていません。 href="/%23Home"代わりのhref="#Home"

Answer 1

として

<ul class="nav navbar-nav"> 
    <li [routerLinkActive]="['active']"> <a [routerLink]="['#'+sectionName]">One</a></li> 
    ... 
</ul> 

そのレンダリングだけではなく、routerLinkディレクティブを使用してのhref属性に値をバインドします。

<a [href]="'#'+sectionName">One</a> 

それとも、独自のディレクティブを構築することができます：

@Directive({ 
    selector: 'a[anchorLink]' 
}) 
export class AnchorLinkDirective { 
    @Input() 
    @HostBinding('attr.href') 
    public get anchorLink() { 
    return '#' + this.link; 
    } 

    public set anchorLink(value: string) { 
    this.link = value; 
    } 

    @Input() 
    public anchorLinkActive: string; 

    private link: string; 
    private ngUnsubscribe$ = new Subject(); 

    constructor(private router: Router, private renderer: Renderer2, private element: ElementRef) { 
    this.router.events.takeUntil(this.ngUnsubscribe$).subscribe(e => { 
     if(e instanceof NavigationEnd) { 
     let parts = e.urlAfterRedirects.split('#'); 
     let element = this.element.nativeElement as HTMLElement; 
     if(this.anchorLinkActive && parts[parts.length - 1] === this.link) { 
      this.renderer.addClass(element, this.anchorLinkActive); 
     } else if(element.classList.contains(this.anchorLinkActive)) { 
      this.renderer.removeClass(element, this.anchorLinkActive); 
     } 
     } 
    }); 
    } 

    ngOnDestroy() { 
    this.ngUnsubscribe$.next(); 
    this.ngUnsubscribe$.complete(); 
    } 
} 

注：このディレクティブは、かなり基本的なものとanchorLinkActive入力の変更をカバーしていません。

Answer 2

使用 'フラグメント= "区分名"' あなたのリンクで：

<a [routerLink]="['/']" fragment="education"> 
    link to user component 
</a> 

出力：/＃教育

詳細情報：https://angular.io/api/router/RouterLink