如何识别子动态组件是否已加载

Question

我正在研究解决方案。

我创建了一个表格，每一行都有扩展按钮。

单击扩展按钮后，我将在该特定行之后加载动态子组件。

呈现子组件后，应使用带有将删除特定动态加载组件的功能的（-）符号更新按钮。

这是我的解决方案代码

1. First table loaded on initial page load

<div class="table" style="display: table;">
<ng-container *ngFor="let rData of reportData; let i = index;" ngTemplateOutletContext=" context: {$row: any}">
<div class="row" style="display: table-row;" >
<div class="col" style="width:40%; display: table-cell;" >
    <button class="btn btn-sm" (click)="loadRowData(rdata)">+</button>{{ rData.name }}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.wins,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.conversions,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.cost,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.bids,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.impressions,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.rev_payout,2)}}</div>
</div>

---

2. Child component code

@Component({
    selector: 'dynamic-component',
    template: `<div class="table" style="display: table;">
<ng-container *ngFor="let rData of reportData; let i = index;" ngTemplateOutletContext=" context: {$row: any}">
<div class="row" style="display: table-row;" >
<div class="col" style="width:40%; display: table-cell;" >
    <button class="btn btn-sm" (click)="loadRowData(rdata)">+</button>{{ rData.name }}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.wins,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.conversions,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.cost,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.bids,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.impressions,2)}}</div>
<div class="col" style="width:10%; display: table-cell;">{{convertToDecimals(rData.rev_payout,2)}}</div>
</div>`
})
export class DynamicComponent {
    @Input() selectedRow: any;
    @Input() nextSplit: any;
    @Input() selectedFilters: any;
    @Input() splitOptions: any;
    @Input() splitByData: any;

    factoryResolver;
    rootViewContainer;

    @ViewChildren('dynamic', {
            read: ViewContainerRef
        }) viewContainerRef: QueryList < ViewContainerRef >

        constructor(
            @Inject(ComponentFactoryResolver) factoryResolver,
            private _apis: ApplicationApiService,
        ) {
            this.factoryResolver = factoryResolver
        }
    setRootViewContainerRef(viewContainerRef) {
        this.rootViewContainer = viewContainerRef
    }

    addDynamicComponent(selectedRow, nextSplit, selectedFilters, splitOptions) {
        const factory = this.factoryResolver
            .resolveComponentFactory(DynamicComponent)

        const component = factory
            .create(this.rootViewContainer.parentInjector)

        component.instance.selectedRow = selectedRow;
        component.instance.nextSplit = nextSplit;
        component.instance.selectedFilters = selectedFilters;
        component.instance.splitOptions = splitOptions;

        var a = JSON.parse(JSON.stringify(selectedFilters));
        var b = JSON.parse(JSON.stringify(selectedRow));


        a.filter(function(o1) {
            return b.some(function(o2) {
                if (o1.id === o2.id) {
                    o1.values = o2.values;
                }
            });
        });

        //Find values that are in result1 but not in result2
        var uniqueResultOne = a.filter(function(obj) {
            return !b.some(function(obj2) {
                return obj.id == obj2.id;
            });
        });

        //Find values that are in result2 but not in result1
        var uniqueResultTwo = b.filter(function(obj) {
            return !a.some(function(obj2) {
                return obj.id == obj2.id;
            });
        });

        //Combine the two arrays of unique entries
        var result = a.concat(uniqueResultOne.concat(uniqueResultTwo));
        result = result.filter((s1, pos, arr) => arr.findIndex((s2) => s2.id === s1.id) === pos);

        this._apis.getReportData(nextSplit.id, this.getApiFilters(result)).subscribe(response => {
            if (response.status == 1200) {
                component.instance.splitByData = response.data.split_by_data;;
            }
        })

        this.rootViewContainer.insert(component.hostView)
    }

    getApiFilters(selectedFilters) {
        var apiFilters: any = [{}];
        for (var i = 0; i < selectedFilters.length; i++) {
            if (selectedFilters[i].values.length > 0) {
                var k;
                k = selectedFilters[i].id
                apiFilters[0][k] = selectedFilters[i].values
            }
        }
        return apiFilters[0];
    }

    loadRowData(rData) {
        this.setRootViewContainerRef(this.viewContainerRef.toArray()[index]);
        this.addDynamicComponent(rData);
    }



convertToDecimals(input, decimals) {
        var exp, rounded,
            suffixes = ['K', 'M', 'B', 'T', 'P', 'E'];


        if (input < 1000) {
            return parseFloat(input).toFixed(2);;
        }

        exp = Math.floor(Math.log(input) / Math.log(1000));

        return (input / Math.pow(1000, exp)).toFixed(decimals) + suffixes[exp - 1];
    }
}

请帮助