输出无效,无控制台错误

时间:2017-12-16 21:25:46

标签: angular

我正在尝试使用Output()装饰,但我认为它不起作用,因为我可能错过了一些东西?没有控制台错误,所以这对我来说是一个问题,因为这是我第一次使用Output()。以下是我的代码。

游戏control.component.html

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

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

  age = 0;
  @Output() startClicked = new EventEmitter<any>();

  onStartClick(){
    this.startClicked.emit("this has clicked "+this.age++);
  }

  constructor() {
}

  ngOnInit() {
  }

}

游戏control.component.html

<div class="row">
  <div class="col-md-12">

    </div>
      <button class="btn btn-success" (click)="onStartClick()">Start</button>
      <button class="btn btn-danger">Stop</button>
</div>

app.component.html

<div class="container">
  <div class="row">
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h1>{{value}}</h1>

      <app-game-control (onStartClick)="parentFromChild($event)">
      </app-game-control>
    </div>
  </div>
</div>

app.component.html

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value = 'Ammar';

parentFromChild(message){
  this.value = message;
}

  constructor(){

  }
}

页面为空,控制台没有错误。

1 个答案:

答案 0 :(得分:1)

您的输出名为startClicked,因此您需要使用父输出。

  <app-game-control (startClicked)="parentFromChild($event)">
  </app-game-control>