Question

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

string desktopPath = Environment.GetFolderPath(Environment.SpecialFolder.Desktop);
var files = System.IO.Directory.GetFiles(desktopPath, "*.txt")
                                .Select(x => System.IO.Path.GetFileName(x)).ToArray();
comboBox1.Items.AddRange(files);
comboBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
comboBox1.AutoCompleteSource = AutoCompleteSource.ListItems;

但如果我运行此代码，我会收到错误：

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

我只是希望路由器只在“注册”路径上路由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

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

Answer 3

选项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
                }
            ]
        }
    ]
},

Angular 2空组件路由

3 个答案: