角度CLI辅助路由

时间:2017-03-14 09:57:37

标签: javascript angular angular2-routing

角度CLI(rc1)

出现问题
  

错误:找不到加载'SigninComponent'的插座auth

file auth.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';


const routes: Routes = [

    {
        path: '',
        loadChildren: './worker/worker.module#WorkerModule'
    },


    {
        path: 'auth',
        loadChildren: './auth/auth.module#AuthModule',
    }

];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });

文件app.component.html

<nav>
    <a routerLink="auth">Auth</a>
    <a routerLink="/">Worker</a>
</nav>

<router-outlet>

</router-outlet>

file auth.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {AuthComponent} from "./auth.component";
import {SignupComponent} from "./signup/signup.component";
import {SigninComponent} from "./signin/signin.component";
import {RestoreComponent} from "./restore/restore.component";

const routes: Routes = [
    {
        path: 'signin',
        component: SigninComponent,
        outlet: 'auth'
    },
    {
        path: 'signup',
        component: SignupComponent,
        outlet: 'auth'

    },
    {
        path: 'restore',
        component: RestoreComponent,
        outlet: 'auth'
    },
    {
        path: '',
        component: AuthComponent,
    },
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

auth.component.html

Auth Component

<nav>
<a [routerLink]="['./', {outlets: {'auth': ['signin']}}]">signin</a>
<a [routerLink]="['./', {outlets: {'auth': ['signup']}}]">signup</a>
<a [routerLink]="['./', {outlets: {'auth': ['restore']}}]">restore</a>
</nav>

<router-outlet name="auth"></router-outlet>

在签名,注册,恢复组件只是文本 - $ nameComponent工作

0 个答案:

没有答案