angular - 将服务的两个不同实例传递给组件的两个不同实例，一个通过路由器导出，一个通过 MatDialog

Question

完全改写的问题 :
我试图简化问题，因为我理解我最初写下它的方式非常复杂；以下是问题的更简单表示，尽管问题的表示略有不同。
我需要一种方法在顶级组件(即“app”组件)中创建服务的两个实例，并将每个实例向下传递给另一个组件(即“客户端”组件)的两个不同实例:

“客户端”组件的第一个实例将在 <router-outlet> 中呈现;

“客户端”组件的第二个实例将在 MatDialog 中呈现；

服务本身将只包含两个方法和两个可观察对象，以实现父子通信，在这种情况下实现并不重要，但它会是这样的:

interface ChildInput {
    someData: number;
}

interface ParentInput {
    someData: string;
}

@Injectable
export class ComService {

    pushToChild(data: ParentInput) {
        // code to push data to the "child" observable
    }

    pushToParent(data: ChildInput) {
        // code to push data to the "parent" observable
    }

    // code to instantiate two observables, one for the parent to subscribe to and one for the child to subscribe to

}

不过应该注意的是， 我需要追踪哪个“子”组件正在发送哪些数据 ;因此，在这种情况下，服务的共享实例将不起作用。
以下是顶级组件模板的结构:

<a [routerLink]="['/new-client']">
    New client
</a> <!-- this will render the "Client" component within router-outlet -->

<router-outlet></router-outlet>

<button (click)="openClientPopup()">
    Add new client
</button> <!-- this will render the "Client" component within a MatDialog instance created by the openClientPopup() method -->

正如我所说，在顶级组件中创建一个单例实例并将其注入(inject)“子”模块，经典的方法是行不通的，因为“子”模块的每个实例都将与应该绑定(bind)的父级交换数据，在父级，到组件本身的特定实例，并通过使用某种 id 或类似的东西来追踪发件人，感觉不必要地令人费解(如果这是唯一的方法，那可能不是这样做的；我真的不'不知道，这就是为什么我要排在第一位)；
另一方面，虽然我可以轻松地将服务实例传递给在 MatDialog 中呈现的组件(实际上有多种方法可以做到)，但我不知道有一种方法可以将服务实例传递给在 <router-outlet> 中呈现的组件.
有什么建议吗？

Answer 1

使用 providers 直接向 parent 提供服务范围。然后 Angular 将通过其构造函数将相同的实例注入(inject)其子代。
家长

@Component({
  providers: [MyService]
})
class MyParentComponent {
    constructor(private myService: MyService)
}

child

@Component({})
class MyChildComponent {
    constructor(private myService: MyService)
}

编辑:
所以你说你想要一个 parent ，两个 child ，两个服务； parent 和各自的 child 可以分享他们的服务吗？如果是这样，您可以使用工厂功能。
父组件

@Component({
    providers: [{
        provide: MyService,
        useFactory: () => (id: string) => new MyService(id)
    }]
})
export class ParentComponent {

    public service_a: MyService;
    public service_b: MyService;

    constructor(@Inject(MyService) myService: any) {
        this.service_a = myService('A');
        this.service_b = myService('B');
    }
}

子组件

export class ChildComponent implements OnInit {

    @Input() service: MyService

    constructor() { }

    ngOnInit(): void {
        this.service.log();
    }
}

服务

@Injectable()
export class MyService {

    constructor(private id: string) { }

    log() {
        console.log(this.id);
    }

}