如何从Angular路由模块向组件传递类或字符串数据？

一、传递字符串/基础类型数据 #

直接在路由配置的data字段中定义字符串、字符串数组等基础类型数据，示例如下：

{
  path: 'periodic-documents',
  data: {
    allowedRoles: ['11A06A', 'Admin'], // 字符串数组
    pageTitle: '定期文档管理' // 单个字符串参数
  },
  component: PeriodicDocumentsComponent
}

组件内接收数据 #

在目标组件中通过ActivatedRoute获取路由数据，支持两种方式：

• 快照获取：适用于路由初始化后数据不会变化的场景
• 订阅Observable：适用于路由复用、参数动态更新的场景

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

@Component({
  selector: 'app-periodic-documents',
  templateUrl: './periodic-documents.component.html'
})
export class PeriodicDocumentsComponent implements OnInit {
  allowedRoles: string[] = [];
  pageTitle: string = '';

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 快照方式获取初始数据
    this.allowedRoles = this.route.snapshot.data['allowedRoles'];
    this.pageTitle = this.route.snapshot.data['pageTitle'];

    // 订阅方式监听数据变化
    this.route.data.subscribe(data => {
      this.allowedRoles = data['allowedRoles'];
      this.pageTitle = data['pageTitle'];
    });
  }
}

二、传递类实例数据 #

传递类实例时，需先在路由模块中完成类的实例化，再存入data字段（直接在路由中写类构造函数可能导致AOT编译或序列化问题）。

步骤1：定义目标类 #

// document-config.model.ts
export class DocumentConfig {
  constructor(public maxUploadSize: number, public allowedFileTypes: string[]) {}
}

步骤2：路由配置中传入类实例 #

import { DocumentConfig } from './document-config.model';

// 先实例化类
const docConfigInstance = new DocumentConfig(10485760, ['pdf', 'docx', 'xlsx']);

const routes: Routes = [
  {
    path: 'periodic-documents',
    data: {
      allowedRoles: ['11A06A', 'Admin'],
      docConfig: docConfigInstance // 传入类实例
    },
    component: PeriodicDocumentsComponent
  }
];

组件内接收类实例 #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DocumentConfig } from './document-config.model';

@Component({
  selector: 'app-periodic-documents',
  templateUrl: './periodic-documents.component.html'
})
export class PeriodicDocumentsComponent implements OnInit {
  docConfig!: DocumentConfig;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 快照方式获取
    this.docConfig = this.route.snapshot.data['docConfig'] as DocumentConfig;

    // 订阅方式监听
    this.route.data.subscribe(data => {
      this.docConfig = data['docConfig'] as DocumentConfig;
    });
  }
}

三、动态数据传递（从服务获取） #

如果需要传递从后端或服务获取的动态数据，可使用路由Resolve守卫提前加载数据，再传递给组件：

步骤1：定义Resolve守卫 #

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DocumentConfig } from './document-config.model';
import { DocumentService } from './document.service';

@Injectable({ providedIn: 'root' })
export class DocumentConfigResolver implements Resolve<DocumentConfig> {
  constructor(private docService: DocumentService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<DocumentConfig> {
    // 从服务获取动态数据，返回类实例的Observable
    return this.docService.getDocumentConfig();
  }
}

步骤2：路由配置中关联守卫 #

{
  path: 'periodic-documents',
  data: { allowedRoles: ['11A06A', 'Admin'] },
  resolve: {
    docConfig: DocumentConfigResolver // 关联守卫
  },
  component: PeriodicDocumentsComponent
}

组件内接收动态数据 #

接收方式与静态类实例一致，route.data中会包含守卫返回的docConfig实例。

内容的提问来源于stack exchange，提问作者S. Aziz Kazdal