Angular2：子路线

debugcn 发表于 Dev

谢谢Memes

我有一个随时要显示的home组件。这是一个下拉菜单。单击菜单中的项目时，下面会弹出一个表格。我希望下拉菜单始终显示。最初，我是这样设计的：

my-app.html

<div>
  <dropdown-selector></dropdown-selector>
  <router-outlet></router-outlet>
</div>

路由工作正常，但是Error: Cannot match any routes: ''(…)即使我base在index.html中定义了标签，我也一直在工作。

然后我认为应该将下拉列表定义为父路由，并将所有下拉列表项路由作为其子路由。

app-routes.ts摘录

export const APPLICATION_ROUTES: RouterConfig = [
    {
        path: '',
        component: Home, // dropdown-selector is inside this component
        children: [
          {path: 'forms/1', component: Form1},
          {path: 'forms/2', component: Form2},
          {path: 'forms/3', component: Form3},
          {path: 'forms/4', component: Form4},
          {path: 'forms/5', component: Form5},
          {path: 'forms/6', component: Form6},
          {path: 'forms/7', component: Form7},
          {path: 'forms/8', component: Form8}
        ]
    }
];

然后重新定义my-app.html ...

my-app.html

<div>
  <router-outlet></router-outlet>
</div>

无论如何，我总是遇到相同的错误，但是现在下拉列表甚至都不会显示。另外，对于新的路由器，我认为没有办法设置默认路由。我以为那''是默认路线。我正在使用Angular2 RC.4。

我设计的方式错误吗？该错误是怎么回事？我看到很多SO帖子都在解决这个问题，但是没有一个帖子解决了我的问题。

亚历克斯·贝格尼特

首先，我认为您的第一个设计就是您想要的，因为我的解决方案具有相同的行为：

我希望我的页眉和页脚一直显示，并浏览页面中间的组件。

<headerComponent></headerComponent>
<router-outlet></router-outlet>
<footerComponent></footerComponent>

现在您的主要问题是

错误：无法匹配任何路线：''（…）

我需要更多代码来显示如何使用路由器导航，但是我将为您提供以下提示：

这意味着，当您启动应用程序时，URL如下所示：

http://localhost:39351/

因此路径是空的：''

您还需要定义一条路径来管理该案例（如果需要，我认为在这种情况下不需要这样做）。例如，当我启动我的应用程序时，我希望它默认情况下加载组件，而我这样做的方式是：

{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },

在您的情况下，您似乎希望在单击时显示表单，然后在单击时访问该路由。为此，您需要在下拉选择器组件Html中管理类似的点击：

<button type="button" (click)="navigate('btn_home')"> 
</button>

然后告诉路由器导航到您的路径：

navigate(elementID) {
       switch (elementID) {
                case 'btn_home':
                    this.router.navigate(['/master']);
                    break;
                default:
                    break;
       }
}

希望这可以帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。