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

Question

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

我已在App Module中定义了我的路径：

app.module.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中定义路由器的方式。

谢谢！