javascript - 在组件内部的 Angular 4 中创建命名路由器时出现解析错误

Question

我使用 Angular 4 创建我的管理面板。在左侧，我有一个从主路由器加载的菜单。左边有一个绿色区域，我想在其中加载另一个组件。我使用了一个名为“console-router”的新路由器。但是，我无法显示内容。另一个组件内部有有效的 HTML，主路由器运行良好。在定义应该在左侧区域中显示“App Dashboard”内容的(链接)时出现解析错误。

我已经在应用程序模块中定义了我的路径:

应用程序模块.ts

{
 path: 'console',
 component: ConsoleComponent,
 children: [
    {
        path: 'dashboard',
        component: AppDashboardComponent,
        outlet: 'console-router'
    }
 ]
}

这是点击“App Dashboard”时应该加载组件的链接:

console.component.html

<li><a [routerLink]="[{ outlets: { console-router: ['dashboard'] } }]">App Dashboard</a></li>

这是控制台中路由器的定义。

console.component.html

<router-outlet name="console-router"></router-outlet>

这是我遇到的错误(好像是语法错误，但在 Angular.io 中代码完全相同):

Answer 1

好吧，对于任何在命名路由器上遇到解析错误的人。路由器不能在其名称中包含连字符 (-)。这正是 Angular 中路由器的定义方式。

谢谢!