0

我正在尝试为弹出窗口创建一个动态组件，以便为不同的内容创建视图和编辑页面。我制作了一个弹出组件，我想在其中传递一个新的组件名称和页面标题。但是，我没有在弹出组件中获得新的组件数据。请查看代码，如果您需要更多详细信息，请询问。提前致谢。

我试图在另一个组件中注入服务，并在单击按钮时获取数据，但在弹出组件中，我没有获取数据。目前，我只对 popup.component.ts 文件执行 console.log 数据，但在 console.log 中没有结果。

动态弹出组件的文件夹结构

弹出服务.ts

export class PopupService {
    isShowing = false;
    private popup = new Subject();
    loadingPopup = new Subject();
    outputEmitter = new Subject();
    popupContent: any = {
        isShowing: false,
        content: null,
        contentParams: PopupModel
    }
    constructor() { }
    public getPopup() {
        return this.popup;
    }
    public showLoading(isLoading: boolean = true) {
        this.loadingPopup.next(isLoading);
    }
    public create(component: any, parameters?: PopupModel): any {     
        this.showLoading(true);
        this.popupContent.isShowing = true;
        this.popupContent.content = component;
        this.popupContent.contentParams = parameters;
        this.popup.next(this.popupContent);
        console.log(this.popupContent)
    }
}

弹出组件.ts

export class PopupComponent implements OnInit, OnDestroy {

public popupObservable: Subscription;

constructor(private popupService: PopupService) { }

ngOnInit() {
this.popupObservable = this.popupService.getPopup().subscribe((popupContent: any) => {
console.log(popupContent)
//code here to use createDynamicComponent method }
}
private createDynamicComponent(component: Type<any>): void {
//code here using ComponentFactoryResolver and ViewContainerRef to create dynamic component
}
ngOnDestroy() {
    if (this.popupObservable && !this.popupObservable.closed) {
      this.popupObservable.unsubscribe();
    }
  }
}

这是调用动态组件并应创建弹出窗口的代码。组件.ts

AddRecord(){
    this.popupService.create( NewRecordComponent, {
      title: 'Add',
      emitterMethod: 'saved'
    })
  }

组件.html

<button (click)="AddRecord()">Add</button>
4

1 回答 1

0

您不会在任何地方从您的主题中发出值。
您需要调用popup.next(popupContent)。

但是，我认为您在这里没有正确的模型。
如果您没有在 getPopup 方法中进行任何异步调用（api、文件系统等），则只需直接返回 popupContent

public getPopup() : {} {
        return this.popupContent;
    }

您还应该在某处为您的 popupContent 定义一个接口，以便您可以导入它并使用强大的接口来避免运行时错误。

例如

export interface IPopupContent {
  isShowing: boolean;
  content: string;
  contentParams: PopupModel;
}

此外，不要直接公开主题，而是公开与主题相关的可观察对象。

请参阅何时在 rxjs 中使用 asObservable()？

于 2019-08-01T00:13:16.697 回答