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