ルータがリダイレクトしないのはなぜですか？

Question

私の角度プロジェクトの構成は次のとおりです。
Index.htmlには、私のapp.componentである<app-root></app-root>が含まれています。
私のアプリのコンポーネントは、以下の構造を有する：

<md-toolbar> 
    <ng-template #notLoggedIn> 
    <a md-icon-button [md-menu-trigger-for]="topnavUserMenu"> 
     <md-icon>person_add</md-icon> 
    </a> 
    <md-menu #topnavUserMenu="mdMenu"> 
     <button md-menu-item> 
     <md-icon>fingerprint</md-icon> 
     <span><a [routerLink]="['/login']" routerLinkActive="active">Login</a></span></button> 
     <button md-menu-item> 
     <md-icon>mode_edit</md-icon> 
     <span><a [routerLink]="['/signup']">Register</a></span></button> 
    </md-menu> 
    </ng-template> 
</md-toolbar> 
<md-sidenav-container> 
    <router-outlet></router-outlet> 
</md-sidenav-container> 

は基本的には、app.componentはアプリ間で永続的であり、すべてのコンテンツがrouter-outletによってレンダリングされます。ユーザーがツールバーのメニューから「ログイン」を選択した場合、希望の動作はアプリがURLにリダイレクトすることですが、ユーザーがリンクをクリックすると何も起こりません。

どうしてですか？どうすれば修正できますか？

注：私は例えば、私のapp.componentにナビゲート機能を追加し、ボタンのクリックにそれを結合することによって、実用的にこれを行う可能性を認識しています：

test() { 
    this.router.navigate(['/login']); 
    } 

私は、それはdoesnの理由で、より興味を持っていますHTMLディレクティブで作業しますが、JSと完全に機能します。

Answer 1

初心者で、この情報が役に立つと思う人には、@ birwinの主張は正しい - アンカータグはボタンでは不正です。あなたは変更する必要があります。

<button md-menu-item> 
     <md-icon>mode_edit</md-icon> 
     <span><a [routerLink]="['/signup']">Register</a></span> 
</button> 

に：

<button md-menu-item [routerLink]="['/signup']"> 
     <md-icon>mode_edit</md-icon> 
     <span>Register</span> 
</button>