无法在 NativeScript 中获取元素的本机视图

Question

我正在尝试使用 Angular 更改 NativeScript 中某些 Switch 元素的宽度，因为在我看来它们太小了。我发现无法通过 NativeScript 的 CSS 子集执行此操作，因此这意味着我必须对本机对象本身进行更改。

为此，我向模板中的每个开关添加了一个模板引用变量，如下所示：

<Switch #switch checked="false"></Switch>

然后在我的 class 中，我尝试访问它们的 android 和 nativeView 属性，如下所示：

@Component({
  selector: "Settings",
  moduleId: module.id,
  templateUrl: "./settings.component.html"
})
export class SettingsComponent implements AfterViewInit {

  @ViewChildren("switch") switches: QueryList<ElementRef>;

  constructor(public calc: CalculationService) {
  }

  ngAfterViewInit() {
    console.log("afterViewInit switches: ", this.switches.length);

    if(isAndroid) {
      this.switches.forEach(
        (item) => {
          const nelem = item.nativeElement;
          console.log(nelem.android);
          console.log(nelem.nativeView);
        }
      );
    }
  }
}

但是我访问它们的两个 console.log 语句只打印 undefined。如何获得开关的原生视图？

Answer 1

Switch 是 NativeScript 的组件而不是 Angular。问题是 Angular 抽象位于移动元素之上，因此当 Angular 生命周期被触发时，一些原生移动元素可能不会加载。

要解决这个问题，请确保您正在使用 NativeScript 的生命周期来获取对 nativeScript 移动组件的引用。

您可以通过以下方式实现：

import { Component, ViewChildren, QueryList, ElementRef} from "@angular/core";
import { isAndroid } from "platform";
import { Page } from "ui/page";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent {
    @ViewChildren("switch") switches: QueryList<ElementRef>;

    constructor(private _page: Page) {
        this._page.on("loaded", () => {
            console.log("afterViewInit switches: ", this.switches.length);

            if (isAndroid) {
                this.switches.forEach(
                    (item) => {
                        const nelem = item.nativeElement;
                        console.log(nelem.android);
                        console.log(nelem.nativeView);
                    }
                );
            }
        })
    }
}

无法在 NativeScript 中获取元素的本机视图

Not able to get element's native view in NativeScript

nativescript

angular2-nativescript

nativescript-angular