angular 7 使用命名路由器出口时路由失败

Question

我正在使用 angular 7 编写一个简单的应用程序。但是路由部分好像完全乱了。

仅供参考。我最近对 angular 8.2 进行了全局安装，但我的项目使用了 angular 7.

详情请见下方

尝试过

1. <a [routerLink]="['/login']">Login</a>
2. <a routerLink="/login">Login</a>
3. <a routerLink='/login'>Login</a>

用于路由器链接。但是好像东西坏了。

下面是我的代码片段。

1。 package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
   .....
   .....
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.8",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

2。 app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    Pagenotfound404Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    .....
    .....
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

3。应用-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: Pagenotfound404Component,
    outlet: 'container'
  },
  {
    path: 'login',
    component: LoginComponent,
    outlet: 'container'
  },
  // configure component for url paths that cannot be found/located.
  {
    path: '**',
    "component": Pagenotfound404Component,
    outlet: 'container'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,
    { useHash: false })],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

4。路由器插座

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

单击顶部指定的 routerLink 时出现以下异常。

core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)
defaultErrorLogger @ core.js:15724

Answer 1

J.

const routes: Routes = [

  {
    path: 'login',
    component: LoginComponent,
    outlet: 'container'
  },
  {
    path: '',
    component: Pagenotfound404Component,
    outlet: 'container'
  },
  // configure component for url paths that cannot be found/located.
  {
    path: '**',
    component: Pagenotfound404Component,
    outlet: 'container'
  }
];

去除组件中的后退提示和双引号

Answer 2

您的问题似乎来自使用命名路由器插座。 Angular 提供命名插座的使用，以防您需要处理多组路由，例如，如果使用带有自己路由的弹出窗口或分屏。每个应用程序还可以有一个未命名的插座作为默认插座。

选项 1 - 不需要命名路由

最简单的选择是简单地删除路由中的 outlet 属性和路由器出口中的 name 属性，即

<router-outlet></router-outlet>

const routes: Routes = [
  ...
  {
    path: 'login',
    component: LoginComponent,
  },
}

<a [routerLink]="['/login']" >

选项 2 - 需要命名路由

如果您确实需要命名插座，那么您的代码将略有更改：

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

const routes: Routes = [
  ...
  {
    path: 'login',
    component: LoginComponent,
    outlet: "myRouterOutlet"

  },
}

<a [routerLink]="[{ outlets: { myRouterOutlet: ['login'] } }]" >

这里是一个link示例使用名称路由器插座
https://www.concretepage.com/angular-2/angular-2-4-named-router-outlet-popup-example

angular 7 使用命名路由器出口时路由失败

angular 7 routing fails when using named router-outlet

javascript

angular

angular-router

1。 package.json

2。 app.module.ts

3。应用-routing.module.ts

4。路由器插座