为什么@ViewChildren 的长度为零？

Question

我followthese 实现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 组件而不是 angular。

查询 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>;

查询元素引用

否则使用模板引用变量：

模板

<TextField #ref></TextField>

component.ts

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