使用router-outlet时主组件与路由组件的通信及数据保存问题

针对你遇到的问题，这里提供三种可行的解决方案，可根据项目架构选择合适的方式：

方法一：通过router-outlet的activate事件获取组件实例 #

利用router-outlet的activate事件直接捕获当前加载的组件实例，后续调用其保存方法：

1. 在MainComponent中添加变量存储当前激活组件，并在onActivate方法中赋值：

import { CreateWorkflowComponent } from './path-to-your-create-workflow/create-workflow.component';
// ...其他导入

export class MainComponent implements OnInit {
  currentActiveComponent: any;
  // ...其他变量

  onActivate(event: any) {
    this.currentActiveComponent = event;
  }

  saveWorkflow() {
    // 校验当前组件类型，避免调用非目标组件的方法
    if (this.currentActiveComponent instanceof CreateWorkflowComponent) {
      this.currentActiveComponent.SaveWorkflow();
    }
  }
}

2. 确保CreateWorkflowComponent中公开了SaveWorkflow方法：

export class CreateWorkflowComponent {
  // ...组件逻辑
  SaveWorkflow() {
    // 实现数据保存逻辑
    console.log('保存CreateWorkflow的数据');
  }
}

方法二：利用已有的WorkflowFacade状态管理（推荐） #

既然已经引入WorkflowFacade，可以通过状态管理解耦组件，无需直接访问子组件：

1. 在CreateWorkflowComponent中，将表单数据同步到Facade的状态中：

export class CreateWorkflowComponent {
  constructor(public workflow: WorkflowFacade) {}

  // 假设使用响应式表单，在表单值变化时更新状态
  ngOnInit() {
    this.form.valueChanges.subscribe(formData => {
      this.workflow.updateWorkflowBasicInfo(formData);
    });
  }
}

2. 在MainComponent的saveWorkflow方法中，直接调用Facade的保存方法：

saveWorkflow() {
  this.workflow.saveWorkflow();
}

3. 在WorkflowFacade中实现saveWorkflow方法，处理实际保存逻辑：

export class WorkflowFacade {
  // ...其他方法
  saveWorkflow() {
    // 从状态中获取最新数据，执行保存操作
    this.workflowState$.pipe(take(1)).subscribe(state => {
      this.workflowService.save(state).subscribe();
    });
  }
}

方法三：使用RxJS Subject实现组件通信 #

通过共享服务的Subject触发子组件的保存操作，适合跨组件通信场景：

1. 创建共享通信服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class WorkflowCommService {
  private saveRequest$ = new Subject<void>();

  // 触发保存请求
  requestSave() {
    this.saveRequest$.next();
  }

  // 订阅保存请求
  onSaveRequest() {
    return this.saveRequest$.asObservable();
  }
}

2. 在CreateWorkflowComponent中订阅保存请求：

export class CreateWorkflowComponent implements OnInit {
  constructor(private commService: WorkflowCommService) {}

  ngOnInit() {
    this.commService.onSaveRequest().subscribe(() => {
      this.SaveWorkflow();
    });
  }

  SaveWorkflow() {
    // 数据保存逻辑
  }
}

3. 在MainComponent的saveWorkflow方法中触发请求：

export class MainComponent implements OnInit {
  constructor(private commService: WorkflowCommService, ...) {}

  saveWorkflow() {
    this.commService.requestSave();
  }
}

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