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();
    }
  }
}

这是调用动态组件并应创建弹出窗口的代码。 Component.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?

加载通用角度动态分量

1 个答案: