这段代码对我来说只需要很少的更改,所以我对你的问题是什么感到困惑。首先,我使用 Angular CLI 创建了一个项目ng new
。然后我使用安装了 ng 材料他们网站上的说明.
我创建了一个与您的服务相同的模态服务:
import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector} from '@angular/core';
import {DomPortalHost, ComponentPortal} from "@angular/cdk/portal";
import {ModalComponent} from "./modal/modal.component";
@Injectable({
providedIn: 'root'
})
export class ModalService {
private modalPortal: ComponentPortal<any>;
private bodyPortalHost: DomPortalHost;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private appRef: ApplicationRef,
private injector: Injector) {
}
showModal(modalName: string) {
// set up the portal and portal host
this.modalPortal = new ComponentPortal(ModalComponent);
this.bodyPortalHost = new DomPortalHost(
document.body,
this.componentFactoryResolver,
this.appRef,
this.injector);
// display the component in the page
let componentRef = this.bodyPortalHost.attach(this.modalPortal);
// listen for modal's close event
componentRef.instance.onModalClose().subscribe(() => {
console.log('I will be very happy if this this gets called, but it never ever does');
this.closeModal();
});
// console.log(componentRef.instance.onModalClose()) shows 1 subscriber.
}
closeModal() {
this.bodyPortalHost.detach();
}
}
我创建了一个模态组件。 TypeScript 与你的相同:
import { Component, OnInit } from '@angular/core';
import {Observable, Subject} from "rxjs/index";
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
constructor() { }
ngOnInit() {
}
private modalClose: Subject<any> = new Subject();
onModalClose(): Observable<any> {
return this.modalClose.asObservable();
}
closeModal() {
// console.log(this.onModalClose()) **shows zero observers** :-(
this.modalClose.next();
this.modalClose.complete();
}
}
您没有给我们 HTML 模型,但这是我使用的:
<p>
modal works!
</p>
<button (click)="closeModal()">Close Modal</button>
这是我的 app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {ModalService} from "src/app/modal.service";
import { ModalComponent } from './modal/modal.component';
@NgModule({
declarations: [
AppComponent,
ModalComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [ModalService],
bootstrap: [AppComponent],
entryComponents: [ModalComponent]
})
export class AppModule { }
注意我在entryComponents 中定义了ModalComponent,并将ModalService 定义为提供者。
应用程序组件 HTML:
<button (click)="showModal()">Show Modal</button>
和 app.component 打字稿:
import { Component } from '@angular/core';
import {ModalService} from "./modal.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public modalService: ModalService){}
showModal(){
this.modalService.showModal("This is the modal name");
}
}
我将 ModalService 注入到构造函数中,并调用 showModal 方法来响应主应用程序中的按钮单击。
Load the app:
单击该按钮,将显示模式。它看起来不像模态,但这可能是因为缺少样式:
现在单击模式内的关闭按钮:
您会看到模式消失,控制台输出显示您的消息。
这篇文章可以帮助您找到您错过的花絮吗?
要补充一件事。如果要将数据从模态发送到调用它的组件,必须更改模型组件 close Modal 方法:
closeModal() {
// console.log(this.onModalClose()) **shows zero observers** :-(
this.modalClose.next('Your Data Here, it can be an object if need be');
this.modalClose.complete();
}
并且您的模态服务可以访问中的数据onModalClose().subscribe()
method:
componentRef.instance.onModalClose().subscribe((results) => {
console.log(results);
console.log('I will be very happy if this this gets called, but it never ever does');
this.closeModal();
});