角度4のルートリンクを切り替えます。

Question

私は、角度4の別のページからサイドメニューをロードするWebアプリケーションを作成しています。 ここにはrouterLinkのメニューボタンが定義されています。メニューが開いている場合でも、

<a class="menu-button"routerLink="/menu"> 
    <div class="menu" > 
    <div class="bar" id="bar-1"></div> 
    <div class="bar" id="bar-2"></div> 
    <div class="bar" id="bar-3"></div> 
    </div> 
</a> 

ナビゲーションバーが表示されます、そして「/メニュー」を「/ホーム」メニューが開いているからrouterLinkを切り替えるには、角度4での方法があります場合、私は思っていました。確か

Answer 1

なく、あなたの質問に答えるならば、

しかし、あなたは、アクティブおよびその非表示に基づいてどのルート確認するか、それぞれのリンクを表示するrouterLinkActiveディレクティブを使用することができます。実装以下

チェック、ここで

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
    <hr /> 
    <a routerLink="/home" [ngClass]="{'hide': !menu.isActive}" 
     routerLinkActive #home="routerLinkActive" >Home</a> 

    <a routerLink="/menu" [ngClass]="{'hide': !home.isActive}" 
     routerLinkActive #menu="routerLinkActive" >Menu</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    `, 
    styles:[ 
    ` 
    .hide{ 
     display: none; 
    } 
    ` 
    ] 
}) 
class AppComponent { name = 'Angular'; } 

はPlunkerです！

これが役立ちますように！

Answer 2

私はちょうどルートとアプリケーションのルートルートを切り替える必要がありました。私は次の指示文でこの機能を追加しました：

import { Directive, HostListener, Input, Self } from '@angular/core'; 
import { RouterLink, Router } from '@angular/router'; 

/** 
* This directive adds the ability to toggle a route with Angular's 
* {@link RouterLink} directive. 
* 
* ### Example: 
* ```html 
* <button routerLink="/my-path" routerLinkToggle></button> 
* ``` 
* The example above creates a toggle button that navigates between 
* `http://localhost/my-path` and `http://localhost`. 
*/ 
@Directive({ 
    selector: '[routerLinkToggle]' 
}) 
export class RouterLinkToggleDirective { 

    /** 
    * The {@link RouterLink.onClick} method. 
    */ 
    private readonly _onClick:() => boolean; 

    /** 
    * Navigation commands. 
    */ 
    private commands: any[] = []; 

    constructor(@Self() private routerLink: RouterLink, 
     private router: Router) { 

     // Keep a reference to the original `routerLink.onClick` method. 
     this._onClick = this.routerLink.onClick; 

     // Replace the `routerLink.onClick` method with a dummy method. 
     // This is needed because the order in which directives on the 
     // same host element are executed is undefined. By overwriting 
     // routerLink's onClick method but keeping a reference to it, we 
     // now have control over when it will be called. 
     this.routerLink.onClick =() => true; 
    } 

    /** 
    * Set the path of the route that you want to toggle to. If no path 
    * is provided, the directive navigates to the root of the app. 
    */ 
    @Input() 
    set routerLinkToggle(commands: any[] | string) { 
     if (commands != null) { 
      this.commands = Array.isArray(commands) ? commands : [commands]; 
     } else { 
      this.commands = []; 
     } 
    } 

    @HostListener('click') 
    onClick() { 
     if (this.router.isActive(this.routerLink.urlTree, true)) { 
      this.router.navigate(this.commands); 

     } else { 
      // Call the `_onClick` method within its original `routerLink` conext. 
      this._onClick.call(this.routerLink); 
     } 
    } 
}