Angular 2 - пользовательское событие автозагрузки - PullRequest
Новая
       24

Angular 2 - пользовательское событие автозагрузки

0 голосов
/ 24 апреля 2019

У меня проблема с частью моего приложения.

В моем html мне нужно запустить метод somes arrayContains, чтобы что-то обнаружить. Как я могу запустить свой метод непосредственно из HTML (без щелчка, ввода мышью и т. Д.)?

Я пробовал пользовательское событие, но оно не работает.

Это мой HTML-файл: 

<div class="LG_global-wrap" (autoLoad)="arrayContains('a string')"></div>

это мой файл TS: 

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

@Component({
  selector: 'something',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.scss']
})
export class somethingComponent implements OnInit  {
  public dataType;
  @Output('autoLoad') initEvent: EventEmitter<any> = new EventEmitter();

  constructor() {}

  ngOnInit() {
    this.somethingService.getSomething().subscribe((elem) => {
      this.dataType = elem.data;
      this.initEvent.emit();
    });
  }

  public arrayContains(needle) {
    console.log('needle: ', needle);
  }

}

Можете ли вы помочь мне, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Вы можете просто добавить вызов функции в ngOnInit, и он будет работать без какого-либо необходимого события: 

ngOnInit() {
    arrayContains(needle);
}

Если вы по какой-либо причине хотите вызвать его из шаблона, EventEmitter можно прослушивать вродительский шаблон, не на том же уровне, на котором он излучает.Поэтому вам нужно добавить его в родительский html: 

<something (autoLoad)="arrayContains('a string')"></something>
0 голосов
/ 24 апреля 2019

Я не знаю ваш вариант использования, но обычно вы делаете такие вещи просто через ngOnInit или некоторые другие угловые хуки жизненного цикла

Вы можете связывать только события, которыефактически существует в этом элементе html (без включения, поэтому onclick становится click).

Вы пытались перейти к пользовательскому событию: 

@Output('autoLoad') initEvent: EventEmitter<any> = new EventEmitter();

Это событие принадлежит вашему компоненту somethingComponent, вы можете использовать это событие только для этого компонента.Таким образом, ваш HTML-код должен быть: 

<something class="LG_global-wrap" (autoLoad)="arrayContains('a string')"></something>

Компонент, имеющий этот HTML, затем прослушивает это событие.Очевидно, что функция-обработчик также должна быть включена в этот компонент: 

export class somethingElseComponent {
  public arrayContains(needle) {
    console.log('needle: ', needle);
  }
}
...