Загрузить общий угловой динамический компонент

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).

Тем не менее, я не думаю, что у вас есть правильная модель здесь.
Если вы не выполняете никаких асинхронных вызовов (API, файловой системы и т. Д.) В вашем методе getPopup, просто верните popupContent напрямую

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

Вы также должны определить интерфейс для вашего popupContent где-нибудь, чтобы вы могли импортировать его и использовать надежный интерфейс, чтобы избежать ошибок во время выполнения.

например

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

Кроме того, не выставляйте предметы напрямую, скорее выставляйте наблюдаемое, связанное с предметом.

См. Когда использовать asObservable() в rxjs?