角2選擇，而無需導航欄

Question

上Angular2路由每個主題有固定的導航欄

<nav> 
    <a [routerLink]="['/component-one']">Component One</a> 
    <a [routerLink]="['/component-two']">Component Two</a> 
</nav> 
<router-outlet></router-outlet> 

所以基本上的鏈接部件的一個上點擊時，該組件將在<nav></nav>

下呈現什麼我需要當你點擊組件一，全視圖（整頁）改變到組件1的視圖（因此沒有<nav></nav>）

我試過puttin克<router-outlet>在一個單獨的@Component

// view.component.ts  
import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'view', 
    template:`<router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class ViewComponent { 

} 

然後

// home.component.ts 
import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'home', 
    template: ` 
     <nav> 
      <a [routerLink]="['/component-one']">Component One</a> 
      <a [routerLink]="['/component-two']">Component Two</a> 
     </nav> 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class HomeComponent { 

} 

的應用程序組件看起來是這樣的：

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

import { HomeComponent } from './containers/home.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    template: ` 
    <h1>{{title}}</h1> 
    <view></view> 
    <home></home> 
    `, 
    styleUrls: ['app.component.css'], 
    directives: [HomeComponent, ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 
    title = 'app works'; 
} 

也試圖把<home>內<view>但沒有

始終得到同樣的錯誤：

Error: Cannot find primary outlet to load 'OneComponent'

任何人都可以幫助我呢？ Thx！

編輯

// app.routes.ts 
import { provideRouter, RouterConfig } from '@angular/router'; 

import { ViewComponent } from './containers/view.component'; 
import { HomeComponent } from './containers/home.component'; 
import { OneComponent } from './containers/one.component'; 
import { TwoComponent } from './containers/two.component'; 

const routes: RouterConfig = [ 
    { 
     path: '', 
     redirectTo: '', 
     pathMatch: 'full' 
    }, 
    { 
     path: '', 
     component: HomeComponent, 
    }, 
    { 
     path: 'one', 
     component: OneComponent 
    }, 
    { 
     path: 'two', 
     component: TwoComponent 
    } 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

Answer 1

移動你的路由，以自己的組件

<nav> 
    <a [routerLink]="['/component-one']">Component One</a> 
    <a [routerLink]="['/component-two']">Component Two</a> 
</nav> 

，並注入他們，你想擁有他們在組件上，當你的路線該組件，你會看到導航和當你轉到另一個組件時，它們將從那裏移除。

一切這之上或之下<router-outlet></router-outlet> 將在每一頁可

Answer 2

您的routerLinks錯誤的路徑：

<nav> 
    <a [routerLink]="['/component-one']">Component One</a> 
    <a [routerLink]="['/component-two']">Component Two</a> 
</nav> 

相比，你的路由器配置路徑

{ 
    path: 'one', 
    component: OneComponent 
}, 
{ 
    path: 'two', 
    component: TwoComponent 
} 

修復他們到：

<nav> 
    <a [routerLink]="['/one']">Component One</a> 
    <a [routerLink]="['/two']">Component Two</a> 
</nav> 

Answer 3

Thx對於快速反應的人......你們都指出了我的正確方向。

解決方案：

主要成分只需要另一組件來呈現視圖（<view></view>）

// app.component.ts 
import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

import { ViewComponent } from './containers/view.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    template: ` 
    <h1> 
    {{title}} 
    </h1> 
    <view></view> 
    `, 
    directives: [ViewComponent, ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

視圖組件只包含<router-outlet></router-outlet>

// view.component.ts 
import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'view', 
    template:`<router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class ViewComponent { 
} 

的路線有（哎呀）

// app.routes.ts 
import { provideRouter, RouterConfig } from '@angular/router'; 

import { HomeComponent } from './containers/home.component'; 
import { OneComponent } from './containers/one.component'; 
import { TwoComponent } from './containers/two.component'; 

const routes: RouterConfig = [ 
    { 
     path: '', 
     redirectTo: '/home', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'home', 
     component: HomeComponent, 
    }, 
    { 
     path: 'one', 
     component: OneComponent 
    }, 
    { 
     path: 'two', 
     component: TwoComponent 
    } 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

那麼它只是建設的意見（頁）

// home.components.ts 
import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

import { NavigationComponent } from './navigation.component'; 

@Component({ 
    selector: 'home', 
    template: ` 
     <div><h1>{{title}}</h1></div> 
     <navigation></navigation> 
    `, 
    directives: [ROUTER_DIRECTIVES, NavigationComponent] 
}) 

export class HomeComponent { 
    title = 'This is home'; 
} 

的導航組件中HomeComponent使用：

// navigation.component.ts 
import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'navigation', 
    template: ` 
     <nav> 
      <a [routerLink]="['/one']">Comp one</a> 
      <a [routerLink]="['/two']">Comp two</a> 
     </nav> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class NavigationComponent { 
} 

和

// one.component.ts 
import { Component } from '@angular/core'; 

import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'one', 
    template: ` 
     <p>ONE: {{message}}</p> 
     <a [routerLink]="['/two']">GOTO Comp two</a> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class OneComponent { 
    message = 'ONE comp here'; 
} 

和

// two.component.ts 
import { Component } from '@angular/core'; 

import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'two', 
    template: ` 
     <p>TWO: {{message}}</p> 
     <a [routerLink]="['/one']">GOTO Comp one</a> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class TwoComponent { 
    message = 'TWO here'; 
}