在 angular 7 中直接从另一个网页打开应用程序时无法初始化路由参数

Question

我是 angualr 7 的新手，我正在尝试为用户构建一个仪表板，用户将从电子邮件中获得 url 作为他们的仪表板。

示例：

Dear User,

Please open the portal using this link (hyperlink to localhost:4200/dashboard/myuserid)

我正在尝试通过使用 angular 路由器和路径参数来实现此目的

AppRoutingModule.ts

const routes: Routes = [
  {
    path: "dashboard/:id",
    component: DashboardComponent
  },

我可以像这样在 ngOnInit 中使用 ActivatedRoute 读取路径变量

ngOnInit() {
      let id = this.route.snapshot.paramMap.get('id');

  }

当我尝试在邮件中使用 hyper link 访问页面时出现以下错误

Error: Cannot match any routes. URL Segment: 'dahboard/B50A43A6EE303E9D239A1F62956B8F2D'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1384)
    at CatchSubscriber.selector (router.js:1365)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    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)

但是当我在其中一个组件中对参数进行硬编码时，我可以毫无问题地打开仪表板

<a [routerLink]="['/dashboard', 'B50A43A6EE303E9D239A1F62956B8F2D']"  
        >Dashboard</a
      >

任何可能导致此问题的想法？

Answer 1

dahboard 与 dashboard 不同:)，所以我想你应该在你的电子邮件中修复你的 link 以包含 'dashboard'。

如果您想要一个未知路径上的 404 页面，您应该将以下内容添加为应用程序路由的 last 项：

{
  path: '**',
  component: Error404Component
}

在 angular 7 中直接从另一个网页打开应用程序时无法初始化路由参数

Unable to initialize the route param when I open the app directly from another webpage in angular 7

angular

angular-router