是否有一種「正確」的方式來將Navbar添加到AngularJS 2.0應用程序中？我有一個3組件的應用程序，我希望所有的頁面在頂部顯示一個導航欄。我希望此導航欄包含Angular Router鏈接，並根據用戶是否登錄切換其外觀。如果我只將下面的代碼粘貼到我的app.component模板中，那麼這些頁面將失去它們的角度功能。我不知道爲什麼會發生這種情況，但我明白爲什麼這種方法不好。如何在Angular2中包含Angular指令的導航欄？

<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.Component，有選擇nav-bar，然後我可以在我的app.component模板改變從：

<router-outlet></router-outlet>

到：

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

，但這種方法導航欄似乎根本沒有渲染，另一個組件正常顯示？

來源

2016-03-26 George Edwards

這不是很多的信息。你可以創建一個Plunker（[模板]（https://plnkr.co/edit/wnLWAW?p））' –

@GünterZöchbauer我有點希望得到一個普遍的答案，你將如何在ng2應用程序中編寫一個導航欄， [這裏]（https://github.com/georgeedwards/Gen-App/tree/master/client/dev）是我的源代碼，如果能幫上忙的話，可以愉快地做一個蹲點嗎？ –

最好是展示您實際嘗試完成的內容，理想情況下使用某些代碼以及您的方法遇到了哪些問題（錯誤，行爲......）。每個開發者都有不同的要求 –

當路由組件注入路由器插座時，您的導航欄必須位於應用組件中。你應該看看下面的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!)' 
    } 

}

來源

2016-06-07 11:08:41

如何在Angular2中包含Angular指令的導航欄？

更新：

回答

相關問題