没有导航栏的Angular 2路由

前端之家收集整理的这篇文章主要介绍了没有导航栏的Angular 2路由前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Angular2路由的每个主题都有一个固定的导航栏

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

所以基本上当点击组件一的链接时,此组件将呈现在< nav>< / nav>下面.

我需要的是当你点击Component One时,完整视图(整页)改变了Component One的视图(因此没有< nav>< / nav>)

我试过把< 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 {

}

App组件如下所示:

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’

有谁可以帮我这个?
谢谢!

编辑

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

解决方法

将路由移动到自己的组件

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

并将它们注入您想要拥有它们的组件上,当您路由到该组件时,您将看到导航,当您转到另一个组件时,它们将从那里移除.

此上面或下面的所有内容< router-outlet>< / router-outlet> 将在每个页面中提供

猜你在找的Angularjs相关文章