Question

我的部分应用程序有问题。

在我的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);
  }

}

你能帮我吗？

Answer 1

我不知道您的用例，但是通常您只是通过ngOnInit或其他angular life cycle hooks

做类似的事情

您只能绑定该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);
  }
}

Answer 2

您只需将函数调用添加到ngOnInit中，它将在没有任何必要事件的情况下运行：

ngOnInit() {
    arrayContains(needle);
}

如果出于某种原因要从模板调用它，则可以在父模板中监听EventEmitter，而不是在其发出的同一级别上监听。因此，您需要将其添加到父html中：

<something (autoLoad)="arrayContains('a string')"></something>

Angular 2-autoLoad自定义事件

2 个答案: