1

我正在尝试使用与 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>
4

1 回答 1

1

问题已得到修复，cell-container我没有使用指令，而是创建了一个自定义组件作为容器，并直接选择了该组件，@ViewChildren(ContainerComponent)而不是@ViewChildren(CellContainerDirective)

于 2018-11-05T20:54:51.667 回答