4

Every topic on Angular2 routing has a fixed navbar

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

So basically when clicked on the link to Component One, this Component will be rendered underneath the <nav></nav>

What I need is when you click on Component One, the full view (full page) changes to the view of Component One (thus without the <nav></nav>)

I tried putting the <router-outlet> in a seperate @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 {

}

and then

// 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 {

}

the App component looks like this:

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

also tried putting <home> inside <view> but nothing

Always getting the same error:

Error: Cannot find primary outlet to load 'OneComponent'

Anyone that can help me with this? Thx!

edit

// 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)
];
4

3 に答える 3

0

ルーティングを独自のコンポーネントに移動する

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

それらを必要なコンポーネントに注入すると、そのコンポーネントにルーティングするとナビゲーションが表示され、別のコンポーネントに移動するとそこから削除されます。

この上または下のすべて<router-outlet></router-outlet> がすべてのページで利用可能になります

于 2016-08-10T09:34:31.427 に答える
0

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>
于 2016-08-10T10:01:50.383 に答える