为什么@ViewChildren零长度？

Question

我follow these实施ViewChildren，但无法接收孩子。为什么呢？

@ViewChildren(TextField) inputs: QueryList<TextField>;

ngAfterViewInit(): void {
    console.log('this.inputs.length = ', this.inputs.length);
    // the length is 0
}

DEMO

Answer 1

在模板中添加模板变量textField（可能是任何内容）：

<StackLayout class="home-panel">
    <TextField #textField hint="Enter text1..."></TextField>
    <TextField #textField hint="Enter text2..."></TextField>
</StackLayout>

然后这将按预期结果：

@ViewChildren('textField') inputs: QueryList<ElementRef>;

Answer 2

关于我们可以查询的内容有一个很好的答案

• What are all the valid selectors for ViewChild and ContentChild?

因此我们可以查询与模板元素匹配的角度指令，但是没有TextField选择器的指令。 TextField是nativescript组件，不是角度。

查询TextValueAccessor

只有TextValueAccessor指令，但为了查询它，你应该尊重它的选择器：

TextField[ngModel],TextField[formControlName],TextField[formControl],

例如，以下内容应该有效：

<强>模板

<StackLayout class="home-panel">
    <TextField hint="Enter text1..." ngModel></TextField>
    <TextField hint="Enter text2..." ngModel></TextField>
                                     ^^^^^^^
                                 notice attribute here
</StackLayout>

<强> component.ts

import { TextValueAccessor } from 'nativescript-angular/forms/value-accessors';

...

@ViewChildren(TextValueAccessor) inputs: QueryList<TextField>;

查询ElementRef

否则使用模板引用变量：

<强>模板

<TextField #ref></TextField>

<强> component.ts

@ViewChildren('ref') inputs: QueryList<ElemenetRef>;