angular - ブーストされた複数のコンポーネント間でサービスを共有する

Question

(2 つの異なるビューで) 別々にブーストされる 2 つのコンポーネントを作成し、これら 2 つのコンポーネント間で一意のサービス (シングルトン) を共有しようとしました。サービスは、これらのコンポーネントの 1 つを操作するために使用されます。私のサービス:

@Injectable()
export class ModalContainerService {
    private component: ModalContainer;

    constructor() {}

    setComponent(component: ModalContainer) {
        this.component = component; <-- for holding the reference to my component
    }

    showFirst() {
        this.component.showFirst();
    }

    addModal(modal: Type) {
        this.component.addModal(modal);
    }
}

最初のコンポーネント:

export class ModalContainer {
    private modals: Array<ComponentRef> = [];

    constructor(
        private loader: DynamicComponentLoader,
        private element: ElementRef,
        private modalService: ModalContainerService) {
        modalService.setComponent(this); <-- where I set the component reference for my service
    }

    showFirst(): void {
        this.modals[0].instance.show();
    }

    addModal(modal: Type) {
        this.loader
            .loadIntoLocation(modal, this.element, 'modalContainer')
            .then((ref) => {
                this.modals.push(ref);
            });
    }
}

bootstrap(ModalContainer, [ModalContainerService]);

そして、最初のコンポーネントとは別にブーストラップされた私の2番目のコンポーネント:

export class TextboxAutocomplete {    
    constructor(private modelService: ModalContainerService) {}
}

しかし、ModalContainerService には最初のコンポーネントの参照が含まれていません... 別々にブーストストラップされた 2 つのコンポーネント間でデータ/サービスを共有することは可能ですか?