Question

所以，我有一个Angular 2组件，我还有一个@HostListener。我想要做的是使用@HostListener调用此组件中的方法，下面显示了我尝试使用@HostListener调用方法的组件。

组件

import { Component, HostListener, Input, OnInit } from '@angular/core';
import { Cell } from '../../cell';
import { Direction } from '../../direction';
import { GridService } from '../../services/grid.service';
import { Directive } from '@angular/core/src/metadata/directives';

@Component({
    selector: 'app-grid',
    templateUrl: 'grid.component.html',
    styleUrls: ['grid.component.css'],
})

@Directive({
    selector: '[appControl]'
})

export class GridComponentDirective implements OnInit {

@Input() score: number;
         best: number;
         itemArray: Cell[];

@HostListener('keyup.ArrowUp') Move(itemArray, UP) { } // That's what I was talking about

    constructor(private gridService: GridService) { }

    ngOnInit() {
        this.itemArray = JSON.parse(localStorage.getItem('Grid'));
        this.score = 0;
        if (this.gridService.countEmpty(this.itemArray) === this.itemArray.length) {
        this.gridService.randomiser(this.itemArray);
        this.gridService.randomiser(this.itemArray);
    }
}

Move(array: Cell[], direction: Direction) {
    array = this.gridService.move(array, this.score, direction);
    localStorage.setItem('Grid', JSON.stringify(array));
    }
}

Answer 1

只需写下：

   @HostListener('keyup.ArrowUp') MoveUp() {this.Move(itemArray, UP)}

从同一组件中的组件调用方法

1 个答案: