通过@ContentChildren获取ng组件的第一个子级

Question

我试图通过@ContentChildren 获得组件的第一个子级

@Component({
selector: 'ing-resizable-view',
templateUrl: './resizable-view.component.html',
styleUrls: ['./resizable-view.component.scss']
})
export class ResizableViewComponent implements AfterContentInit{
constructor() { }
@ContentChildren(Object) private rootChildren: QueryList<any>;
ngAfterContentInit(): void {
console.log(this.rootChildren.first);
}
}

组件html

<ng-content>
</ng-content>

这是试图使用组件的HTML

<ing-resizable-view class="mat-elevation-z8 panel" cdkDropListGroup>
<ing-var-tree class="resize" (selectorEvents)="selectedVars=$event" [handlers]="selectedVars"></ing-var-tree>
<ing-var-list (selectorEvents)="selectedVars=$event" [vars]="selectedVars"></ing-var-list>
</ing-resizable-view>

Answer 1

如果不在@ContentChildren中指定任何组件选择器，就不能以通用方式返回所有子组件。

我可以建议您的解决方案是创建一个特定的dumb指令，例如ing-main或ing-resizable，它将应用于其中一个子组件(或所有子组件，具体取决于您的需要(。

在这种情况下，您将能够使用此指令查询一个或所有组件。

当然，这将要求每次将指令添加到一个子组件中，但它也可能更强大和更具进化性，如果出于任何原因，第一个子组件并不总是有意义的话。

ing-main指令：

@Directive({
selector: '[ing-main]'
})
export class IngMainDirective {
}

您当前的模板代码：

<ing-resizable-view class="mat-elevation-z8 panel" cdkDropListGroup>
<ing-var-tree ing-main ...></ing-var-tree>
<ing-var-list ...></ing-var-list>
</ing-resizable-view>

因此ing-resizable-view组件可以使用以下指令查询所有子组件：

@ContentChildren(IngMainDirective) private children: QueryList<IngMainDirective>;