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

Answer 2

选项 1：

如果您知道在子路由器插座中没有任何显示内容，您实际上可以隐藏它。这样就不会报错了。

<router-outlet *ngIf="hasNoQuestionSelected$ | async"></router-outlet>

我觉得这在技术上比“虚拟组件”更正确，但是在绝对情况下，这很好、合法并且可能更安全。即使将此作为似乎可行的解决方案提出，但这样做可能会增加调试竞争条件的难度 - 这可能取决于您如何确定是否显示插座。

很想知道人们是否认为这是一个糟糕或合法的解决方案。

PS。不要与 Angular 的 EmptyOutletComponent 混淆。这是相关但不一样的东西，实际上为空路由添加了一个新的路由器出口。

--

选项 2：

你可以有一个只有路径而没有子、组件或重定向的路由。

您仍然可以查询ActivatedRoute 快照并向下遍历树以找到您需要的参数——它们仍然存在。但是如果没有<router-outlet>，路由器将不会尝试自己做任何事情——这取决于你。或者您仍然可以定义一个组件，然后根据条件（例如屏幕宽度）决定是显示还是隐藏 router-outlet 以使用它。

你可能会问我为什么要这个？有时，通过针对不同屏幕尺寸的响应式设计，我发现自己需要完全不同的行为。有时这需要“钻研”snapshot.children[0].routeData 以提取 URL 参数。然后，我将自己在主组件中显示该组件。

只是在某些情况下将其添加为另一种选择。

{
    path: 'contactus',
    component: ContactUsComponent,

    children: [
        {
            path: 'topics',
            pathMatch: 'full',
            redirectTo: '/support/contactus'
        },
        {
            path: ':category',

            children: 
            [
                {
                    path: ':question'
                    // component: ContactUsFormComponent
                }
            ]
        }
    ]
},

Answer 3

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

import { DemoComponent } from './demo.component';

const demoRoutes: Routes = [
    { path: '', component: DemoComponent }
];

export const demoRouting: ModuleWithProviders = RouterModule.forChild( demoRoutes );