有没有办法用参数化路径发送静态路由数据？

Question

我在路由定义中传递静态路由数据，如下所示：

const routes: Routes = [{ path: '/map',
                          component: MapComponent,
                          data: { animation: 'mapPage' } }];

然后通过以下方式在我的组件中访问它：

constructor(private _contexts: ChildrenOutletContexts) { }

getRouteAnimationData(): Data | unknown {
  return this._contexts.getContext('primary')?.route?.snapshot?.data?.['animation'];
}

但是，我现在也有了参数化路线：

const routes: Routes = [{ path: '/record/:type',
                          component: RecordComponent,
                          data: { animation: ':typePage' }

现在，当然，这只会发送静态字符串

':typePage'

，而不发送

'areaPage'

或

'languagePage'

，具体取决于

:type

的实际值。

有没有办法让这个参数添加到数据值中？

Answer 1

我非常不确定我是否正确理解了你的意思，所以请更好地进行提升和解释。

意味着你需要使用 ParamMap

getRouteAnimationData(): string {
    const type = this.route.snapshot.paramMap.get('type');
    return type + 'Page';
  }

如果我弄错了，请让我更多地了解您的要求

Answer 2

data

仅适用于静态属性，您可以选择更动态的

state

，请参阅下面演示状态用法的工作示例！

孩子

import { Component, OnInit } from '@angular/core';
import {
  ActivatedRoute,
  Data,
  NavigationEnd,
  Router,
  Params,
} from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-child',
  template: `<p>
  from state animation! - {{animation}}
  from params! - {{paramValue}}
  </p>`,
  standalone: true,
})
export class ChildComponent implements OnInit {
  animation: string = '';
  paramValue: string = '';
  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    // this.router.events
    //   .pipe(filter((e) => e instanceof NavigationEnd))
    //   .subscribe((e) => {
    //     const navigation = this.router.getCurrentNavigation();
    //     this.animation =
    //       navigation?.extras?.state?.['animation'] ||
    //       this.activatedRoute.snapshot?.data?.['animation'];
    //   });
    // or

    this.activatedRoute.params.subscribe((params: Params) => {
      this.paramValue = params['type'];
      const navigation = this.router.getCurrentNavigation();
      this.animation =
        navigation?.extras?.state?.['animation'] ||
        this.activatedRoute.snapshot?.data?.['animation'];
    });
  }
}

家长

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule, ChildComponent],
  template: `
    <a routerLink="/record/helloType" [state]="{animation: 'fromHTML'}">
      navigate to child from html with data 'fromHTML'
    </a> | 
    <a routerLink="/record/asdfType" [state]="{animation: 'fromHTML2'}">
      navigate to child from html with data 'fromHTML2'
    </a>
    <router-outlet/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'record/:type',
        component: ChildComponent,
        data: { animation: 'mapPage' },
      },
    ]),
  ],
});

stackblitz 演示