加载通用角度动态组件

Question

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

我尝试在另一个组件中注入服务，它会在单击按钮时获取数据，但在弹出组件中，我没有获取数据。目前，我只是将 console.log 数据写入 popup.component.ts 文件，但在 console.log 中没有结果。

popup.service.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)
    }
}

Popupcomponent.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'
    })
  }

component.html

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

Answer 1

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

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

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

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

例如

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

另外，不要直接公开主题，而是公开链接到主题的可观察对象。

见When to use asObservable() in rxjs?