Question

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

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

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

然后在我的课堂上，我尝试像这样访问它们的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中获取元素的本机视图

1 个答案: