如何在Angular中包含带指令的导航栏？

Question

是否有正确的＆＃34;将navbar添加到Angular应用程序的方法？我有一个3组件应用程序，我希望所有页面都显示在顶部的导航栏。我希望这个导航栏包含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';
}

这就是它呈现的方式，如上面的代码所示：

然后如果我添加带角度参考的导航条代码：

或者，如果我使用选择器nav-bar创建一个Nav.Component，那么我可以从以下位置更改我的app.component模板：

<router-outlet></router-outlet>

到：

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

但是使用这种方法导航条似乎根本不渲染，而其他组件显示为正常？

Answer 1

当路由器组件注入路由器插座时，您的导航栏必须位于应用组件中。你应该看一下以下的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!)'
  }

}