1

我正在尝试使用 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但是我访问它们的两个语句只是 print undefined。如何获得交换机的本机视图？

4

1 回答 1

4

这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);
                    }
                );
            }
        })
    }
}
于 2018-07-06T09:44:43.670 回答