以 Angular 形式路由编码 url

Question

在我的角度项目中，我有一条路线作为

  path: 'friend/messages/:encryptedKey/:type',
  component: EncryptedRouteComponent,
  canActivate: [AuthGuard],
,
  path: '**',
  component: PageNotFoundComponent,

如果我点击网址为

baseUrl/friend/messages/NjgzMw==/inbox

我正在导航到 PageNotFoundComponent 组件 我只得到 url

baseurl/friend/messages/NjgzMw

这就是为什么它不去 EncryptedRouteComponent 如何解决这个问题

这是我的 PageNotFoundComponent 代码片段

在 PagenotFoundComponent 中我想要解码的 url 为

friend/messages/NjgzMw/inbox

这样我就能成功导航到 EncryptedRouteComponent

Answer 1

我无法在 stackblitz 中复制该场景，但如果您在正常解析密钥时遇到问题，可以使用

encodeURI

或

decodeURI

来传递密钥！

您还可以使用

encodeURIComponent

和

decodeURIComponent

为此！

参考答案

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouterModule, provideRouter, Router } from '@angular/router';
import 'zone.js';
import { TestComponent } from './test/test.component';

const routes = [
  {
    path: 'test/:id/qwerty',
    component: TestComponent,
  },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';

  constructor(private router: Router) {}

  ngOnInit() {
    const encoded = encodeURI('NjgzMw==');
    this.router.navigate(['test', encoded, 'qwerty']);
  }
}

bootstrapApplication(App, {
  providers: [provideRouter(routes)],
});

孩子

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  standalone: true,
})
export class TestComponent implements OnInit {
  value = '';
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
      this.value = decodeURI(params['id']);
    });
  }
}

堆栈闪电战