角度 AOT 编译由于"无法构造属性的查询."而失败。

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)直接选择了所述组件