Question

我正在尝试使用自定义组件动态填充表，这些组件可以与JIT编译完美配合，但是在使用AOT时会引发错误。

我也尝试过在ViewChildren（）装饰器上使用forwardRef，但似乎没有任何效果。我的猜测是，用于选择某些DOM元素的服务当时不可用。

有任何线索或建议吗？

错误：

> ./node_modules/.bin/ng serve --aot

ERROR in : Can't construct a query for the property "cellList" 
of "ListComponent in example-angular-app/dist/table/table.d.ts" 
since the query selector wasn't defined.

代码：

export class ListComponent implements OnInit, AfterViewChecked, OnDestroy {
    isAlive = true;

    @ViewChildren(CellContainerDirective, { read: ViewContainerRef }) cellList: QueryList<ViewContainerRef>;

    config: Config;
    isLoading: boolean;

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private cdRef: ChangeDetectorRef
    ) { }

    ngAfterViewChecked() {
        this.cdRef.detectChanges();

        this.cellList.changes
            .pipe(takeWhile(() => this.isAlive))
            .subscribe((list) => {
                list.forEach((cellContainer: ViewContainerRef, index: number) => {
                    cellContainer.clear();

                    const columnIndex = index % this.config.columns.length;

                    const componentFactory = this.componentFactoryResolver
                        .resolveComponentFactory(this.config.columns[columnIndex].cellComponentType);

                    const componentRef = cellContainer
                        .createComponent(componentFactory);

                    const component = <ICellComponent>componentRef.instance;

                    Object.assign(component, {
                        data: this.list.results[columnIndex],
                        column: this.config.columns[columnIndex]
                    });
                });
            });
    }
}

模板：

    <tbody *ngIf="list?.total > 0">
        <ng-container *ngFor="let item of list.results;">
            <tr>
                <td *ngFor="let col of config.columns;">
                    <ng-container cell-container></ng-container>
                </td>
            </tr>
        </ng-container>

        <ng-template #whenEmpty>
            <tr class="empty">
                {{ config?.texts?.table.noData | async }}
            </tr>
        </ng-template>
    </tbody>

Answer 1

该问题已得到解决，而不是使用cell-container指令，而是创建了一个自定义组件来充当容器，并通过@ViewChildren(ContainerComponent)而不是@ViewChildren(CellContainerDirective)直接选择了该组件< / p>

Angular AOT编译失败，原因是“无法构造属性..”

1 个答案: