Angular中如何在ts文件内实现不同组件之间的数据传递

你当前使用的是封装好的模态框服务动态加载组件，不需要通过模板的@Input传值，直接通过模态框开放的配置参数传递即可，操作步骤如下：

• 步骤1：父组件传值逻辑修改
  在modal.open()方法的第二个入参新增配置项，把需要传递的变量放入data字段中，修改后代码如下：

public openSelectRolesModal() {   
    this.modal.open(
        SelectCustomersProjectModalComponent,
        // 新增配置参数
        {
          data: {
            category: this.category,
            data: this.data
          }
        }
    ).afterClosed().subscribe((users: User[]) => {
        if (!users) return;
        this.setRoles(users);
    });
}

• 步骤2：子组件接收参数
  如果是Angular Material Dialog，在子组件构造函数中注入MAT_DIALOG_DATA即可拿到传递的参数，示例代码如下：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

// 可自定义类型替换any，保证类型安全
interface IModalInput {
  category: 你的category变量对应类型,
  data: 你的data变量对应类型
}

@Component({
  // 你的组件原有配置
})
export class SelectCustomersProjectModalComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) public inputData: IModalInput
  ) {
    // 构造函数内即可拿到值，也可在ngOnInit等生命周期中直接使用
    console.log('接收的category', this.inputData.category);
    console.log('接收的data', this.inputData.data);
  }
}

如果是ng-bootstrap Modal，注入NGB_ACTIVE_MODAL令牌取data字段即可，逻辑完全一致。

拓展：如果是自己手动通过ComponentFactoryResolver动态创建组件，也可以拿到组件实例后直接给@Input装饰的属性赋值，效果和模板传值一致：

const componentRef = viewContainerRef.createComponent(SelectCustomersProjectModalComponent);
// 直接给@Input属性赋值
componentRef.instance.category = this.category;
componentRef.instance.data = this.data;

封装好的模态框已经把这层逻辑做了封装，直接用官方提供的data参数传值更规范。

内容的提问来源于stack exchange，提问作者ander99