Question

我是Angular的新手。我正在使用Angular 5.我正在尝试创建一个具有开始按钮的GameComponent。单击“开始”按钮时，它应定期调用startGame（），它会增加一个数字并将其记录到控制台。这是代码：

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
 <app-game-control></app-game-control>
</div>

游戏control.component.html

<p>
  <button class="btn btn-primary" (click)="setInterval(startGame(), 1000);">Start</button>
</p>

游戏control.component.ts

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

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  cnt: number = 0;
  constructor() { }

  ngOnInit() {
  }
  startGame() {
    this.cnt = this.cnt + 1;
    console.log ('Count is ' + this.cnt);
   // alert('Hello');
  }
}

Answer 1

这是因为您无法直接访问模板中的全局函数。

您可以像模板方：

一样使用它

(click)="setIntrvl()"

组件方：

setIntrvl(){
   setInterval(() => this.startGame(),1000);
}

如果你仍想在模板方面使用，你可以hack喜欢

组件方：

cnt = 0;
setInterval = setInterval;

startGame() {
    this.cnt = this.cnt + 1;
    console.log ('Count is ' + this.cnt);
}

模板面：

<button class="btn btn-primary" (click)="setInterval(startGame.bind(this), 1000);">Start</button>

WORKING DEMO （同时使用演示模板侧+组件侧）

错误TypeError：_co.setInterval不是函数

1 个答案: