Событие Nativescript (касание) для пользовательского компонента Angular - PullRequest
Новая
       7

Событие Nativescript (касание) для пользовательского компонента Angular

0 голосов
/ 29 сентября 2019

Я пытаюсь связать событие (касание) с нестандартным угловым компонентом в nativescript.

Я создал настраиваемый компонент с именем 'ns-custom' и попытался связать(нажмите) событие к нему.Но это не работает.

В пользовательском компоненте я делаю это: 

<StackLayout>
    <Label text="Title"></Label>
    <Label text="some text"></Label>
</StackLayout>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ns-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent{

  constructor() { }
}

И в родительском элементе я делаю это: 

<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

    onCustomComponentClick() {
        console.log('custom-component was tapped');
    }

Я ожидаю, что событие (касание) сработает, когда я касаюсь пользовательского компонента, но это не так.Я построил ту же структуру в чистом Angular, и событие (click) срабатывает, если поместить его в пользовательский компонент.

Я пытался распространить событие (tap) из пользовательского компонента, как показано ниже, но затем оно сработалодважды (как и ожидалось, потому что событие tap распространится до родительского компонента, если я не использую event.stopPropagation()): 

<StackLayout (tap)="emitTap()">
    <Label text="Title"></Label>
    <Label text="some text"></Label>
</StackLayout>


@Component({
  selector: 'ns-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent{
   @Output() tap = new EventEmitter();

   emitTap() {
       this.tap.emit();
   }
}

И затем перехватим событие в родительском компоненте: 

<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

    onCustomComponentClick() {
        console.log('custom-component was tapped');
    }

Но теперь событие касания срабатывает дважды.Я могу решить эту проблему, изменив имя EventEmitter на что-то отличное от «tap» (например, @Output() childTapped = new EventEmitter(); и <ns-custom (childTapped)="onCustomComponentClick()"></ns-custom>) или передав объект $event на нажатие, а затем используйте event.stopPropagation(), но это не изящно ввсе.

Есть идеи, как элегантно решить эту простую задачу?

...