Angular 2空组件路由

我是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很新.

解决方法

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

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

或者,如果您希望路由器插座为空,直到您导航到注册,请将四个完全留空：

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

Angular 2空组件路由

解决方法

猜你在找的Angularjs相关文章