Question

即使在极简主义的情况下，我也很难获得辅助路线的服务。我很确定，我将angular documentation on routes and multiple outlets固定为T，所以我真的不知道自己缺少什么。

app.routing.ts ：

const appRoutes: Routes = [
  {
    path: '',
    children: [
      // aux route with named outlet, **DOES NTO WORK :(**
      {
        path: 'simple',
        component: SimpleComponent,
        outlet: 'simpleOutlet'
      },

      // default route, *WORKS*
      {
        path: '',
        component: AppComponent
      },
      // fallback route, *WORKS*
      {
        path: '**',
        component: AppComponent,
        redirectTo: ''
      }
    ]
  }
];

app.component.html ：

<h2>I am the app component</h2>
<router-outlet></router-outlet>
<router-outlet name="simpleOutlet"></router-outlet>

在使用routerLink之前，我想通过直接在浏览器中输入URL使其工作。我是否有可能错过了一些有关通过直接URL导航到辅助路线的关键信息？直接入侵网址时会发生以下情况：

http://localhost:4200/有效；显示app.component.html
http://localhost:4200/somethingfallback123有效；由于后备路由，显示app.component.html
http://localhost:4200/(simpleOutlet:simple) 不起作用 http://localhost:4200(simpleOutlet:simple)，http://localhost:4200/(simpleOutlet:/simple)，http://localhost:4200/(simpleOutlet:simple/)等也没有。（您可以看到，我很绝望）

Stackblitz link

错误日志：

Mozilla Firefox：

ERROR Error: "[object Object]"
resolvePromise http://localhost:4200/polyfills.js:7882:31
resolvePromise http://localhost:4200/polyfills.js:7839:17
scheduleResolveOrReject http://localhost:4200/polyfills.js:7941:17
invokeTask http://localhost:4200/polyfills.js:7489:17
onInvokeTask http://localhost:4200/vendor.js:70021:24
invokeTask http://localhost:4200/polyfills.js:7488:17
runTask http://localhost:4200/polyfills.js:7256:28
drainMicroTaskQueue http://localhost:4200/polyfills.js:7663:25

Firefox不会抛出正确的错误消息似乎是一个已知问题。

谷歌浏览器：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL             Segment: 'simple'
Error: Cannot match any routes. URL Segment: 'simple'

环境（角度版本：ng v）

Angular CLI: 7.0.4
Node: 9.7.1
OS: linux x64
Angular: 7.0.2

Answer 1

在应用模块文件中将RouterModule更改为RouterModule.forRoot([])：

@NgModule({
  imports:      [ BrowserModule, 
                  FormsModule, 
                  RouterModule.forRoot([]) //this line
                ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

Answer 2

此处提供解决此问题的代码StackBlitz

在app.routing.ts

中

代替

const appRoutes: Routes = [
  {
    path: '',
    children: [
      // aux route with named outlet, **DOES NTO WORK :(**
      {
        path: 'simple',
        component: SimpleComponent
      },

      // default route, *WORKS*
      {
        path: '',
        component: AppComponent
      },
      // fallback route, *WORKS*
      {
        path: '**',
        component: AppComponent,
        redirectTo: ''
      }
    ]
  }
];

做

const appRoutes: Routes = [
  {
    path: 'main',
    component: AppComponent,
    children: [
      // aux route with named outlet, **DOES NTO WORK :(**
      {
        path: 'simple',
        component: SimpleComponent,
        outlet: 'simpleOutlet'
      }
    ]
  }
];

和代替

exports: [RouterModule, appRoutes]

做

exports: [RouterModule]

在app.component.html

代替

<h1>
  app component
</h1>

<router-outlet></router-outlet>

做

<h1>
  app component
</h1>

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

在app.module.ts

删除import { Routes, RouterModule } from '@angular/router';，在这里您不需要它，您已经制作了一个单独的路由文件

添加

import { AppRoutingModule } from './app.routing';
import { SimpleComponent } from './simple/simple.component';

代替

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([])
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

做

@NgModule({
  declarations: [ AppComponent, HelloComponent, SimpleComponent ],
  imports:      [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  bootstrap:    [ AppComponent ]
})

按照declarations然后imports的顺序进行，只要您制作了一个单独的路由文件

，该顺序就很重要

有关更多详细信息和参考，请查看上面提到的链接。

具有命名路由器出口的角度辅助路由：错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段

2 个答案: