Angular2にAngularディレクティブを含むnavbarを含めるにはどうすればよいですか？

Question

AngularJS 2.0アプリケーションにnavbarを追加するための「正しい」方法はありますか？私は3つのコンポーネントのアプリケーションを持っています。すべてのページに、ナビゲーションバーの一番上に表示することができます。このNavbarにAngular Routerリンクを含めて、ログインしているユーザーに基づいて外観を切り替えることをお勧めします。 app.componentテンプレートに次のコードを貼り付けるだけで、ページの角度機能が失われます。私は、なぜこれが起こるかはわかりませんが、なぜそのアプローチが良くないのか分かります。

<div class="nav"> 
    <a [routerLink]="['Login']">Login</a> 
</div> 

個別のコンポーネントを作成していますか、それとも過剰ですか？従来の知恵があるかどうかを調べるだけです。 （私はそれがあまりにも主観的だとは思わないが、もしそうなら私にあなたに知らせるだろうと思う））。

更新：だからここ

は私app.component.ts

import { Component } from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; 

import {TodoService} from './todo/services/todo.service'; 
import { TodoCmp } from './todo/components/todo.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    //here is where I tried the navbar 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['client/dev/todo/styles/todo.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
    TodoService, 
    UserService 
    ] 
}) 
@RouteConfig([ 
    { 
    path: '/', 
    name: 'TodoCmp', 
    component: TodoCmp, 
    useAsDefault: true 
    } 
    //other paths 
]) 

export class AppComponent { 
    title = 'ng2do'; 
} 

であり、これはショー上記のコードのように、それがレンダリングする方法です：

、その後、角度参照付きのNavbarコードを追加すると：

私はNav.Componentを作成した場合あるいは、セレクタnav-barで、その後、私はから私のapp.componentテンプレートを変更することができますに

<router-outlet></router-outlet> 

：

<nav-bar></nav-bar> 
<router-outlet></router-outlet> 

が、このアプローチでナビゲーションバーはまったくレンダリングされないように見え、他のコンポーネントは通常どおり表示されますか？

Answer 1

ルートコンポーネントがルータコンセントに注入されている間は、navbarがアプリコンポーネント内にある必要があります。次のPlunker https://plnkr.co/edit/ekkB3F?p=infoを見てください。ルートコンポーネントは次のとおりです。

import {Component} from '@angular/core' 
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {LoginComponent} from './login.component' 
@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <a [routerLink]="['Login']" *ngIf="login">{{login}}</a> 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input [(ngModel)]="login" type="text"/> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    { 
     component: LoginComponent, 
     name: 'Login', 
     path: '/login', 
    } 
    ]) 
export class App { 
    login:string; 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 

}