Question

使用案例：我正在构建一个Toast通知服务ToastService。我希望能够将这项服务注入组件中以创建新的祝酒词。

我创建了一个代表单个通知的Toast组件：

@Component({
    selector: 'toast',
    template: `<div>This is a notification</div>`
})
export class Toast {}

我希望能够呼叫toastService.show(myMessage);以显示我的某个组件的祝酒词。

到目前为止，我的ToastService看起来像这样：

@Injectable()
export class ToastService{

    constructor(private loader: DynamicComponentLoader) {}

    show(message: string) {
        this.loader.loadNextToLocation(
            Toast,
            /* location: ElementRef - how do I get one? I want to load it into the body */
        )
        .then((ref: ComponentRef) => {
            console.log('loaded toast!');
        });
    }
}

我希望将toast加载为body元素的子元素，以确保它始终位于其余app元素之上。

这怎么可能？还是有更好的方法？我试图弄清楚他们是如何在angular2 material repo中做到的，但这对我来说太难理解了。

Answer 1

我不会尝试将ElementRef放入服务中。当你尝试使用它时，你甚至不知道ElementRef是否仍然有效。

相反，我会在“某处”添加一个Toast组件来监听Observable中ToastService的更新，并显示从Observable传递的组件作为事件

如果您希望将Toast组件添加到AppComponent之外，则可以将其作为独立的Angular应用程序引导。

在这种情况下，您需要在引导之前创建共享服务实例，并为两个“应用程序”提供相同的实例，如：

let toastService = new ToastService();
bootstrap(AppComponent, [provide(ToastService, {useValue: toastService})]);
bootstrap(Toast, [provide(ToastService, {useValue: toastService})]);

Answer 2

查看angular-modal项目。模态的要求与模态对话框类似。

专门检查modal.ts文件，open方法如何获取根组件以显示对话框。

public open(componentType: FunctionConstructor, bindings: ResolvedProvider[],
                config?: ModalConfig): Promise<ModalDialogInstance> {
        // TODO: appRef.injector.get(APP_COMPONENT) Doesn't work.
        // When it does replace with the hack below.
        //let myElementRef = this.appRef.injector.get(APP_COMPONENT).location;
        let elementRef: ElementRef = (<any>this.appRef)._rootComponents[0].location;

        return this.openInside(componentType, elementRef, null, bindings, config);
    }

appRef是在{costroctor}中注入的ApplicationRef类，并存储对正在运行的应用程序的引用。

  constructor(private componentLoader: DynamicComponentLoader, private appRef: ApplicationRef,
                @Optional() defaultConfig: ModalConfig) {

Angular2：使用服务中的DynamicComponentLoader

2 个答案: