1。 package.json

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。 app-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

您的问题似乎来自使用命名路由器出口。如果您需要处理多组路由，例如，如果使用具有自己的路由的弹出窗口或分屏，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'] } }]" >

这里是指向示例路由器名称的出口的链接
https://www.concretepage.com/angular-2/angular-2-4-named-router-outlet-popup-example

Answer 2

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

删除组件中的反尖和双引号

使用命名路由器出口

1。 package.json

2。 app.module.ts

3。 app-routing.module.ts

4。路由器插座

2 个答案: