无法在NativeScript中获取元素的本机视图 [英] Not able to get element's native view in NativeScript

问题描述

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

I am trying to change the width of some Switch elements in NativeScript with Angular because they are too small in my opinion. I have found that there is no way to do this through NativeScript's CSS subset so that means I have to make the change to the native object itself.

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

To do this I have added a template reference variable to each one of the switches in my template like this:

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

然后在我的课堂上，我尝试像这样访问它们的android和nativeView属性:

Then in my class I try to access their android and nativeView properties like this:

@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.如何获得交换机的本机视图?

But the two console.log statements where I'm accessing them just print undefined. How do I get the native view of the switches?

推荐答案

Switch是NativeScript的组件，而不是Angular.事实是，Angular抽象位于移动平台的顶层，因此在触发Angular生命周期时可能不会加载某些本机移动元素.

The Switch is a NativeScript's component and not Angular. The thing is that the Angular abstraction is on top of the mobile one so some native mobile elements might not be loaded when the Angular lifecycles are triggered.

要解决此问题，请确保您使用的是NativeScript的生命周期来获取对nativeScript的移动组件的引用.

To resolve that make sure you are using NativeScript's lifecycles to gett reference to nativeScript's mobile components.

您可以通过以下方式实现这一目标:

You can achieve that in the following way:

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中获取元素的本机视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！