Angular2（RC3）の現在のルートに基づいて州を設定します

Question

私はオプションを選ぶことができるサイドメニューと、このオプションのコンテンツが表示される右側のエリアを持っているとしましょう。

私はそうのようなrouterLinkディレクティブのシリーズを使用して、サイドメニューを構築したいと思います。また

@Component({ 
selector: 'side-menu', 
template: ` 
    <div> 
     <ul> 
      <li><a [routerLink]="['/option1']">Option 1</a></li> 
      <li><a [routerLink]="['/option2']">Option 2</a></li> 
      <li><a [routerLink]="['/option3']">Option 3</a></li> 
     </ul> 
    </div> 
` 
}) 

を、私は、対応する<li>は、たとえば、class="active"を使用して、強調表示することにしたいと思います。それ、どうやったら出来るの？

もちろん、click()にはイベントハンドラが追加されていますが、ここではちょうどrouterLinkを使用していますが、ここでイベントを処理するよりもはるかにクリーンです。

私はplnkrを提供したいと思いますが、@angular/routerからインポートすると現在のAngular2テンプレートが壊れているようですが、これはルータバンドルがnpmのRC3にないためです。

Answer 1

対応する<li>を強調表示する場合は、たとえばclass="active"を使用します。それ、どうやったら出来るの？我々はangular2の新しいルータとangular2のルータchnages continueslyのでASAIKを知っているよう

これはあなたのrouterLinkに routerLinkActiveディレクティブを使用して非常に簡単です。例えば

ここ

<a [routerLinkActive]="['active']" [routerLink]="['/Demo']"> 
    Hello Link 
</a> 

がWorking Example

も多くsimilerの質問があるplunker取り組んでいますが

• Angular 2: How to determine active route with parameters?
• In Angular 2 how do you determine the active route?
• In Angular 2 how do I assign a custom class to an active router link?

更新

時にはそれが誤り

を投げるが未定義 のプロパティ 'pathsWithParams' を読み取ることができませんので、あなたはrouterLinkActive

[routerLinkActiveOptions]="{exact:true}" 

こちらを参照して、同様にこれを定義する必要があります

• Angular2(RC-4) :Cannot read property 'pathsWithParams' of undefined