Расширить контроль NativeScript - SetNativeView

Question

Я хочу расширить компонент пользовательского интерфейса NativeScript Switch и использовать его в качестве пользовательской директивы.

@Directive({
    selector: "CustomSwitch"
})
export class CustomSwitch extends Switch {
    constructor() {
        super();
        // Add custom events here
        if (isIOS) {
            // Change background and other properties here.
        }
    }
}

Я вижу, что ViewBase класс метода, подобного setNativeView.Может ли кто-нибудь поделиться примером того, как этого можно достичь, и что может быть лучшим способом сделать это.

CSS может помочь с глобальным стилем, но мне также нужна возможность расширить компонент для предоставления пользовательских событий.

Answer 1

Я думаю, что вы смешиваете компонент NativeScript с функциями Angular, если вам нужна директива, вам не нужно расширять Switch или какой-либо {N} компонент.

Просто примените селектор и вставьте ElementRef в ваш конструктор, который будет указывать на Switch (или на любой элемент, к которому вы применили селектор), вы можете просто изменить его цвет фона.Точно так же, как и в Angular Web-приложениях.

@Directive({
  selector: "CustomSwitch"
})
export class CustomSwitchDirective implements AfterViewInit {
  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    const switch = <Switch>this.el.nativeElement;
    switch.backgroundColor = "red";
  }
}