为什么是@ViewChildren zero-length？

Question

我 follow these to implement ViewChildren，但无法获得 children。为什么？

@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

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

所以我们可以查询匹配模板元素的angular指令，但是没有带有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>;