Не удалось получить родное представление элемента в NativeScript - PullRequest
Новая
       7

Не удалось получить родное представление элемента в NativeScript

0 голосов
/ 06 июля 2018

Я пытаюсь изменить ширину некоторых элементов Switch в NativeScript с помощью Angular, потому что, на мой взгляд, они слишком малы. Я обнаружил, что нет способа сделать это с помощью подмножества CSS в NativeScript, так что это означает, что мне нужно внести изменения в сам нативный объект.

Для этого я добавил переменную ссылки на шаблон к каждому из переключателей в моем шаблоне, например: 

<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. Как получить исходный вид переключателей?

1 Ответ

0 голосов
/ 06 июля 2018

Switch является компонентом NativeScript, а не 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);
                    }
                );
            }
        })
    }
}
...