Wie wird eine Navbar mit Angular-Direktiven in Angular2 eingebunden?

Question

Gibt es eine "korrekte" Möglichkeit, Navbars zu Ihrer AngularJS 2.0-Anwendung hinzuzufügen? Ich habe eine 3-Komponenten-App, wo ich möchte, dass alle Seiten eine Navigationsleiste oben anzeigen. Ich möchte, dass diese Navigationsleiste Angular Router-Links enthält und das Erscheinungsbild basierend auf dem angemeldeten Benutzer ändert oder nicht. Wenn ich einfach den folgenden Code in meine appcomponent-Vorlage lege, verlieren die Seiten ihre eckige Funktionalität. Ich bin mir nicht sicher, warum das passiert, aber ich kann verstehen, warum dieser Ansatz nicht gut ist.

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

Erstellen Sie eine separate Komponente oder ist das zu viel? Einfach nur schauen, ob es irgendeine konventionelle Weisheit gibt, sonst nur für eine funktionierende Lösung. (Ich glaube nicht, dass das zu subjektiv ist, aber ich denke, Sie werden es mich wissen lassen, wenn es das ist;)).

Update:

So, hier ist mein 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'; 
} 

und das ist, wie es macht, wie der Code oben zeigt:

und dann Wenn ich den Navbar-Code mit Winkelreferenzen hinzufüge:

<router-outlet></router-outlet> 

zu:

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

aber mit diesem Ansatz

Alternativ kann, wenn ich einen Nav.Component, mit Wahl nav-bar schaffen, dann kann ich meine app.component Vorlage aus ändern scheint die Navigationsleiste überhaupt nicht zu rendern und die andere Komponente wird normal angezeigt?

Answer 1

Ihre Navigationsleiste muss sich in der App-Komponente befinden, während die Routenkomponente in den Router-Ausgang injiziert wird. Sie sollten sich den folgenden Plunker https://plnkr.co/edit/ekkB3F?p=info ansehen. Die Wurzelkomponente ist die folgende.

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!)' 
    } 

}