Angular2：儿童路线

我有一个家庭组件，我想随时展示。这是一个下拉菜单。当点击菜单中的项目时，下面会弹出一个表单。我希望下拉列表随时显示。本来我设计这样的：Angular2：儿童路线

我-app.html

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

路由工作得很好，但我一直得到Error: Cannot match any routes: ''(…)即使我有我的index.html中定义的base标签。

然后，我认为我应该定义下拉菜单作为父路线，并将所有下拉菜单项路线作为其子项。

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

然后重新定义我的-app.html ...

我-app.html

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

我一直无论如何都会得到相同的错误，但现在下拉菜单甚至不会显示。另外，对于新路由器，我认为没有办法设置默认路由。我假定''是默认路由。我正在使用Angular2 RC.4。

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

来源

2016-08-12 DankestMemes

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

我希望我的页眉和页脚来显示所有的时间，并通过组件导航页面的中间。

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

我们你的主要问题，这是

Error: Cannot match any routes: ''(…)

我需要更多的代码，告诉您如何与您的路由器导航，但我会给你以下提示：

这意味着，当你启动你的应用程序，网址如下所示：

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

希望这有助于。

来源

2016-08-12 14:56:20

它工作:)，但我想配置路径去“鬼”组件。我不想在那里展示任何东西。虽然我不喜欢那个想法的声音。 – DankestMemes

在我自己的解决方案中，我实际上有一个管理身份验证的主要，然后我有第二个（我上面粘贴的那个）管理应用程序的其余部分。在这种情况下，您需要将第二个插座定义为第一个插座的子插座。你应该在路由器上看到Angular2文档来帮助你做到这一点。如果这是一个被接受的答案，请标记它，我会非常感激。如果您需要更多帮助，请不要犹豫在另一篇帖子上提出另一个问题。 –

Angular2：儿童路线

回答

相关问题