Добавьте событие click к динамически созданному компоненту в ionic - PullRequest
Новая
       5

Добавьте событие click к динамически созданному компоненту в ionic

0 голосов
/ 12 декабря 2018

У меня есть компоненты, добавленные динамически в страницу через фабрику компонентов.Как я могу привязать событие click каждого к функции (передавая id в качестве аргумента для каждого)?Это мой код:

компонент / одна карта / card-one.html: 

<ion-card>
  <ion-card-header>
    {{ title }}
  </ion-card-header>

  <ion-card-content>
    {{ data }}
  </ion-card-content>
</ion-card>

компонент / одна карта / одна карта.ts : 

import { Component, Input } from '@angular/core';
import { ProcessComponent } from '../process';

@Component({
  selector: 'card-one',
  templateUrl: 'card-one.html'
})
export class CardOneComponent implements ProcessComponent {

  @Input() data: any;
  @Input() title: any;

  constructor() {}

}

А на странице / home / home.ts : 

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ProcessProvider } from '../../providers/process/process';
import { ProcessComponent } from '../../components/process';
import { CardOneComponent } from '../../components/card-one/card-one';
import { CardTwoComponent } from '../../components/card-two/card-two';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('processContainer', { read: ViewContainerRef }) container;

  constructor(public navCtrl: NavController, private processProvider: ProcessProvider, private resolver: ComponentFactoryResolver) { }

    clickOnComponent(component){
        // 
    }

    ionViewDidLoad() {

        let items = [
            {
                component: CardOneComponent,
                desc: 'Mighty first step',
                title: 'Hello'
            },
            {
                component: CardTwoComponent,
                desc: 'Always first looser',
                title: 'Hello'
            }
            ]

        for (let card of cards) {
        const factory = this.resolver.resolveComponentFactory(card.component);
        let componentRef = this.container.createComponent(factory);

        (<ProcessComponent>componentRef.instance).data = card.desc;
        (<ProcessComponent>componentRef.instance).title = card.title;
        }
    }
}

Спасибо!

1 Ответ

0 голосов
/ 12 декабря 2018

Вы можете определить @HostListener в каждом из этих компонентов, это решит тот щелчок на компоненте, который сам по себе

пример 

export class CounterComponent  {

  public counter:number = 0


  @HostListener('click') onClick() { 
    this.counter++;
  }

}

  @HostListener('click') onClick() { 
    this.counter++;
  }

отметьте это демонстрация stackblitz ?

Обновлено ??

Я все еще не уверен, что вы сказали о добавлении события клика всоздавать компоненты, но, возможно, это поможет вам создать свойство output и подписаться на это свойство, и это свойство будет запускаться / генерироваться каждый раз, когда пользователь нажимает на компонент

, смотрите эту демонстрацию, где я создаю динамический компоненткак вы и передать данные и обработать событие щелчка на этом компоненте

Счетчик компонента 

export class CounterComponent  {

 @Input() counter:number = 0;
 @Output() onClick=new EventEmitter(); 


  @HostListener('click') emitClick() { 
    this.counter++;
    this.onClick.emit(`this user click ${this.counter}`);
  }

}

Компонент приложения 

@Component({
  selector: 'my-app',
  template: `
    <template #counters></template>
  `,
})

export class App {
  @ViewChild("counters", { read: ViewContainerRef }) container;
  componentRef: ComponentRef<any>;

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.container.clear();
    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(CounterComponent);
    this.componentRef = this.container.createComponent(factory);
    this.componentRef.instance.counter = 10;
    this.componentRef.instance.onClick.subscribe(data => this.handler(data));
  }

  handler(countData) {
    console.log(`handler : data => ${countData}`)
  }

  ngOnDestroy() {
    this.componentRef.destroy();
  }
}

демонстрация стекаблиц ??

...