根据配置文件动态更改Angular 2/5应用程序的布局

Question

我正在尝试提出一种灵活的布局方式，其功能将像这样。

1. 页面上元素的默认布局（例如输入，表格等）。
2. 用户可以更改任何这些元素在屏幕上出现的位置。 他可以将某个输入移动到组件内部的其他位置。 然后，我向后端请求并保存他的配置。
3. 每当用户再次登录时，都会通过HTTP请求加载配置，并且默认视图会根据配置进行更改。

我当前代码的一个示例：

    <div class="row row-mp docDefaultRow">
        <div>
        <ng-template #firstContainer>

        </ng-template>
        <!--<app-partner-recipient -> this is the component that gets created in firstContainer
                [areItemsSet]="areItemsSet"
                (selectedPartnerEmitter)="setPartnerFromChild($event)"
                (selectedRecipientEmitter)="selectedRecipient"
                [partnerMissing]="partnerMissing">
        </app-partner-recipient>-->
        <div class="col-md-12 col-lg-6">
            <div class="row">
                <div class="col-sm-offset-6 col-sm-6">
                    <div class="form-group">
                        <label class="control-label" for="date_created">Datum dokumenta</label>
                        <form #myForm="ngForm" novalidate>
                            <my-date-picker name="date_created"
                                            id="date_created"
                                            [options]="myDatePickerOptions"
                                            [disabled]="true"
                                            [ngModel]="date_created"
                                            required readonly>
                            </my-date-picker>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ng-template #secondContainer>

    </ng-template>
    <ng-template #thirdContainer>

    </ng-template>

并在组件中

@ViewChild('firstContainer', { read: ViewContainerRef }) container1;
@ViewChild('secondContainer', { read: ViewContainerRef }) container2;
public component1Ref: ComponentRef<any>;
public component2Ref: ComponentRef<any>;
public config;

ngOnInit() {
    this.createComponents(this.config);
}

createComponents(cfg) {
    // How to use config to create components in different places?
    this.container1.clear();
    const factory1: ComponentFactory<any> = this.resolver.resolveComponentFactory(PartnerRecipientComponent);
    this.component1Ref = this.container1.createComponent(factory1);
    this.component1Ref.instance.areItemsSet = this.areItemsSet;
    this.component1Ref.instance.partnerMissing = this.partnerMissing;
    this.component1Ref.instance.selectedPartnerEmitter.subscribe(event => this.setPartnerFromChild(event));
    this.component1Ref.instance.selectedPartnerEmitter.subscribe(event => this.selectedRecipient = event);

    this.container2.clear();
    const factory2: ComponentFactory<any> = this.resolver.resolveComponentFactory(ItemsComponent);
    this.component2Ref = this.container2.createComponent(factory2);
    this.component2Ref.instance.itemsMissing = this.itemsMissing;
    this.component2Ref.instance.isPartnerSet = this.isPartnerSet;
    this.component2Ref.instance.selectedPartner = this.selectedPartner;
    this.component2Ref.instance.selectedPremiseId = this.selectedPremiseId;
    this.component2Ref.instance.ItemsArrEmitter.subscribe(event => this.refreshItems(event));
    this.component2Ref.instance.documentSummaryEmitter.subscribe(event => this.refreshDocumentSummary(event));
    this.component2Ref.instance.temporaryItemsEmitter.subscribe(event => this.temporaryItems = event);
    this.component2Ref.instance.arePricesUpdated.subscribe(event => this.pricesUpdated(event));
}

我基本上不知道如何在我想要的任何ng模板中创建组件，根据配置文件，我会收到。

Answer 1

我认为整个过程有点蛮力的。 我所做的是重组了子组件，并使它们通过我订阅的包含子组件的服务通过服务发出价值。

然后，我检索一个配置文件，并将其设置为一个behaviorSubject，可供订阅。

我订阅cfg，并像这样处理发出的值：

this.config.forEach(component => {
            if (component === 'partnerComponent') {cfg.push(PartnerRecipientComponent);
            } else if (component === 'itemsComponent') {cfg.push(ItemsComponent);
            } else if (component === 'summaryComponent') {cfg.push(OrderSummaryComponent);
            } else if (component === 'dateComponent') {cfg.push(OrderDateComponent);
            } else if (component === 'numberComponent') {cfg.push(OrderNumberComponent);
            } else if (component === 'methodComponent') {cfg.push(SendingMethodComponent);
            } else if (component === 'remarkComponent') {cfg.push(OrderRemarkComponent);
            } else if (component === 'timepickerComponent') {cfg.push(TimepickerComponent);
            } else {cfg.push(undefined); }
        });
        this.createComponents(cfg);


createComponents(cfg) {
    const containers = [this.container1, this.container2, this.container3, this.container4, this.container5, this.container6, this.container7, this.container8, this.container9, this.container10];
    for (let i = 0; i < cfg.length; i++) {
        if (cfg[i] === undefined) {continue; }
        containers[i].clear();
        const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(cfg[i]);
        this.componentsArray.push(containers[i].createComponent(factory));
    }
}

并创建组件。