Angular 2空组件路由

Question

我是Angular 2的新手,我对路由有疑问.我有一个app.routing文件,其中我只想要一个路径.

{path: 'signup', component: SignupComponent}

但是,如果我运行此代码,我会收到一个错误:

Error: Uncaught (in promise): Error: Cannot match any routes: ''

所以我决定在''路径上使用一个空组件,它的工作原理与我想要的完全一样.

路由文件:

import {Routes, RouterModule} from '@angular/router';
import {SignupComponent} from "./signup/signup.component";
import {EmptyComponent} from "./empty/empty.component";

const appRoutes:Routes = [
    {path: '', component: EmptyComponent},
    {path: 'signup', component: SignupComponent}
];

export const appRoutingProviders = [];

export const routing = RouterModule.forRoot(appRoutes);

带路由器插座的文件:

<header>
    <div class="btn-wrapper">
        <button class="btn-sign-up btn-fancy" routerLink="/signup">Sign Up</button>
        <button class="btn-sign-in btn-ghost btn-fancy">Sign In</button>
    </div>
    <i class="material-icons more">keyboard_arrow_down</i>
    <router-outlet></router-outlet>
    <div class="overlay" *ngIf="overlay" (click)="close()"></div>
    <div class="tinted"></div>
</header>

我只想要路由器只在"注册"路径上路由SignupComponent.还有另一种方法可以做到这一点,并消除使用空组件？如果这个问题写得不好,我很抱歉,我对StackOverflow很新.

Answer 1

只需将空路由重定向到注册路由:

const appRoutes:Routes = [
    {path: '', redirectTo: 'signup', pathMatch: 'full'}, 
    {path: 'signup', component: SignupComponent}
];

或者,如果您希望路由器插座为空,直到您导航到signup,请将四个完全清空:

const appRoutes:Routes = [
    {path: '', children: []}, 
    {path: 'signup', component: SignupComponent}
];