如何在 Angular2 中使组件普遍可访问

Question

我基本上想创建一个自定义对话框组件，我可以在我的 Angular2 应用程序的任何位置使用它，而不管使用组件在应用程序树中的什么位置。为简单起见，我们将其称为我的 SayHello 组件。

考虑以下应用程序树：

假设我想要SomeComponent.level3.component调用SayHello.component中的对话框。

在 Angular 1.x 中，我会将 RootScope 注入控制器并以这种方式点亮对话框。现在，我明白（或多或少）对于 Angular2 你可以在组件树中冒泡事件（使用事件发射器），但是从 SomeComponent 一路冒泡事件似乎很乏味。level3.component上树下到 SayHello.component。

所以我想我会创建一个 SayHello 服务，我会在任何我想点亮我的对话的地方注入它。这是我制定的代码草图。

myApp.component.ts

import {SayHelloComponent} from "<<folder>>/sayHello.component";
import {BunchOfComponents} from "<<folder>>/bunchOfComponents";

@Component({
    directives: [SayHelloComponent],
    selector: "my-app",
    templateUrl: `<bunch-of-components>Within this component exists
                      SomeComponent.level3.component </bunch-of-components>
                      <say-hello showdialog="{{showDialog}}" message="{{message}}">
                      </say-hello>`

})
export class myAppComponent {
    showDialog = false;
    message = "";

    constructor(private sayHelloService: SayHelloService) {
        this.showDialog = sayHelloService.showDialog;
        this.message = sayHelloService.message;

    }
}

SayHelloService.ts

import {Injectable} from 'angular2/core';

@Injectable()
export class SayHelloService {
    public showDialog: boolean = false;
    public message: string ="";

    constructor() {

    }

}

SayHello.component.ts

import {Component} from "angular2/core";
import {SayHelloService} from "<<folder>>/SayHelloService";
@Component({
    directives: [],
    selector: "say-hello",
    template: "[do hello component]"
})
export class SayHelloComponent {
    @Input() showdialog: boolean;
    @Input() message: string;

       constructor(private sayHelloService: SayHelloService) {

    }
    //This idea here is to detect change in showDialog
    //If true then do an alert with the message
    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        var obj = changes["showdialog"];
        if (obj !== null) {
            if (changes["showdialog"].currentValue === true) {
                alert(this.message);
                this.sayHelloService.showDialog = false;
            }

        };
    }

}

SomeComponent.level3.component

import {Component} from "angular2/core";
import {SayHelloService} from "<<folder>>/SayelloService";

@Component({
    directives: [],
    selector: "some-component",
    template: "<button (click)='doHello()'>Do say hello</button>"
})
export class PageContactUsComponent {

    constructor(private sayHelloService: SayHelloService) {

    }


    doHello(): void {
        this.sayHelloService.message = "Hello world";
        this.sayHelloService.showDialog = true;
    }
}

appBoot.ts

import {bootstrap} from "angular2/platform/browser";
import {MyAppComponent} from "<<folder>/MyAppComponent";
import {SayHelloService} from "<<folder>>/SayHelloService";

bootstrap(MyAppComponent, [
    SayHelloService
]);

不用说，这行不通。我没有收到任何错误，但是 SayHello.component 没有检测到 'showdialog' 值的任何变化...所以什么也没有发生。任何有关如何正确执行此操作的想法将不胜感激。

Answer 1

如上评论所述，

在服务中放置一个 Observable（注意，不是 EventEmitter）
在其他组件可以调用的服务上放一个 showDialog() API/method。 showDialog() 方法应该调用 next() 来发送事件。
您的对话框组件可以订阅该事件，并且 unhide/show 本身在收到事件时也可以订阅。

要在服务中包装 Observable，请参阅。

Answer 2

使用服务的替代方法是使用此处描述的 ViewContainerRef/createComponent 动态创建组件：

https://www.lucidchart.com/techblog/2016/07/19/building-angular-2-components-on-the-fly-a-dialog-box-example/

如何在 Angular2 中使组件普遍可访问

How to make a component universally accessible in Angular2

angular2-services

angular