我创建了一个类
appConfig.ts，该类在每个类中都有扩展 组件类。 （旨在最小化重复的方法和代码并保持 放在一个可重复使用的地方。我面临的问题是：-1）我在中间有一个视图 屏幕，每个组件都在这里加载。 将不同的组件作为堆栈添加到视图中，例如：-
<app-root> <abc-component></abc-component> <cde-component></cde-component> .... .... </app-root> **How to keep track of component and remove from the view or load on above another component as above example.**a）有时，
abc.component加载cde.component并 cde.component 提取数据并要更新abc.component的视图而无需再次加载abc.component（因为abc.component位于 视图）。如何将数据从cde.component传递到abc.component？
this.comCommu.componentMethodCalled.subscribe()在app.config.ts在视图中已经加载组件时订阅数据。
当abc.component.ts加载时，我使用了类似的解决方法- cde.component.ts并同时希望将数据从abc传递到 cde。
setTimeout(() => { this.comCommu.setData(someData); }, 500) // loading cde.component.ts here this.loadDynamicComponent("CdeComponent"); <---appConfig.ts因此
cde.component.ts首先加载并订阅来自comCommu（commuService.ts）问题场景：-
abc.component.ts使用以下命令来获取appConfig.ts中的数据postCreateTask()并将其存储在变量viewTaskActionData中，然后 然后加载cde.component.ts。加载cde.component.ts时，基于viewTaskActionData.id，它调用resolveTaskViewAction（）并存储result在变量中，并希望在其视图中使用该变量 但是resolveTaskViewAction()没有被呼叫。
在每个组件中扩展这样的同一个类并用于上述目标以及每个组件的变量中的数据仓库（数据的消耗和传递）是否是一个好主意。
在给定场景下使用动态组件加载时，如何跟踪视图以及如何删除，添加和更新视图。
@Injectable()
export class ComCommunicatnService {
private componentMethodCallSource = new Subject<any>();
componentMethodCalled = this.componentMethodCallSource.asObservable();
// methods
public someMethods(data) {
this.componentMethodCallSource.next({ 'text': "assigneData", 'data': data, 'component': 'cdeComponent' });
}
<button (click)="loadComponent('AbcComponent')">Load </button>
// Using dynamic component loader here for loading components dyanmically
// method to load dynamic components
public loadComponent(cmptName): any {
switch (cmptName) {
case 'AbcComponent':
cmptName = AbcComponent;
break;
case 'CdeComponent':
cmptName = AbcComponent;
break;
}
const componentRef = this.componentFactoryResolver.resolveComponentFactory(cmptName).create(this.injector);
this.appRef.attachView(componentRef.hostView);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0]
as HTMLElement;
document.querySelector('.centerWindow').appendChild(domElem);
return componentRef;
}
button (click)="call()"> Done </button>
export class AbcComponent extends appConfig implements OnInit(){
constructor(
public toastr: ToastrService,
public cdRef: ChangeDetectorRef,
public serviceInvoker: HttpService,
public lang: I18stringService,
public utils: UtilsService,
public comCommu: ComCommunicatnService,
public eRef: ElementRef,
@Inject(forwardRef(() => ContainerComponent)) public containerCmpt: ContainerComponent
) {
super(toastr, cdRef, serviceInvoker, lang, utils, comCommu, eRef, containerCmpt);
}
public call(){
const payload = {...}
this.postCreateTask(payload,'resolveResponse','cdeComponent');
//<---app.config.ts
}
}
export class CdeComponent extends appConfig implements OnInit(){
constructor(
public toastr: ToastrService,
public cdRef: ChangeDetectorRef,
public serviceInvoker: HttpService,
public lang: I18stringService,
public utils: UtilsService,
public comCommu: ComCommunicatnService,
public eRef: ElementRef,
@Inject(forwardRef(() => ContainerComponent)) public containerCmpt: ContainerComponent
) {
super(toastr, cdRef, serviceInvoker, lang, utils, comCommu, eRef, containerCmpt);
}
ngOnInit(){
// implementation of codes..
if (this.viewTaskActionData && this.viewTaskActionData.id) {
// <======this is not getting called
const _params = {
taskId: this.viewTaskActionData.id
}
this.resolveTaskViewAction(_params);
}
}
}
export class ActionItemConfig implements OnInit {
constructor(
public toastr: ToastrService,
public cdRef: ChangeDetectorRef,
public serviceInvoker: HttpService,
public lang: I18stringService,
public utils: UtilsService,
public comCommu: ComCommunicatnService,
public eRef: ElementRef,
@Inject(forwardRef(() => ContainerComponent)) public containerCmpt:
ContainerComponent
) {
const _self = this;
this.comCommu.componentMethodCalled.subscribe(
(result) => {
if (result.text === "assigneData") {
self.assigneData = result.data
}
// if (result.text === "viewTaskActionData") {
// _self.viewTaskActionData = result.data
// }
});
}
public postCreateTask(payload, actionType, componentToLoad) {
const _self = this;
_self.serviceInvoker.invoke('post.create.task', {}, payload).subscribe(
(result) => {
if (actionType === 'resolveResponse' && componentToLoad) {
_self.viewTaskActionData = result; //<= === =
_self.loadDynamicComponent(componentToLoad); //<====
}
},
errUser => {
self.toastr.error('Unabe to create tasks');
}
)
}
public resolveTaskViewAction(_params, actionType ? , componentToLoad ? ) {
const _self = this;
self.serviceInvoker.invoke('get.viewDetail.task', _params).subscribe(
(result) => {
self.resolved_viewTaskActionData = result;
},
(errUser) => {
_self.toastr.error('Unabe to resolve task Id');
}
)
}
// calling and loading components from extend class in each component
public loadDynamicComponent(cmptClassName) { //<= === === ===
// container.component.ts
this.containerCmpt.loadComponent(cmptClassName);
}
}