Question

我正在使用NativeScript（CLI v5.2.0）Angular（v7.2.3）开发移动应用程序，并且我的@ViewChild ElementRef尚未定义。

我检查了“ @ angular / core”导入中是否存在ViewChild和ElementRef，将我的@ViewChild变量重命名，将范围从公共更改为私有，并将console.log（）移至ngAfterViewInit中（请参阅：{{ 3}}），并使用“ tns debug android --clean --bundle”重建我的项目。

component-name.component.ts：

@ViewChild("test") private _scrollView: ElementRef;

constructor(page: Page) {

    page.actionBarHidden = true;

}

ngAfterViewInit() {

    console.log("ScrollView element:", this._scrollView.nativeElement);

}

...

component-name.component.html：

<GridLayout columns="*" rows="*, auto">

    <ScrollView (swipe)="onSwipe($event)" col="0" row="0" #test>
        <StackLayout>

...

如果将#test放在ScrollView元素之后，则我有未定义的“ this._scollView”变量。

如果像上面的示例一样将#test放在最后，则一切正常，并且在console.log（this._scrollView.nativeElement）中显示我的元素！

一个错误？

Answer 1

<块引用>

之前的代码：

import { ElementRef } from "@angular/core";

@ViewChild("myElement") myElement: ElementRef;

<块引用>

迁移代码：

import { ElementRef } from "@angular/core";

@ViewChild("myElement", { static: false }) myElement: ElementRef;

{static: false} means nfAfterInit,
{static: true} mean ngInit

<块引用>

它对我有用。

如何修复NativeScript Angular中未定义的@ViewChild ElementRef？

1 个答案: