角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'; 
}