Question

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

我-app.html

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

路由工作正常，但即使我在index.html中定义了Error: Cannot match any routes: ''(…)标记，我也不断获得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}
        ]
    }
];

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

我-app.html

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

我总是得到同样的错误，但现在下拉列表甚至都不显示。此外，使用新路由器，我认为没有办法设置默认路由。我假设''是默认路由。我正在使用Angular2 RC.4。

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

Answer 1

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

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

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

现在你的主要问题是

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

我需要更多代码来展示您如何使用路由器进行导航，但我会给您以下提示：

这意味着当您启动应用时，网址如下所示：

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

希望这有帮助。

Angular2：儿童路线

1 个答案: