角度2輸出和eventemitter不發射

Question

我正在學習angular 2，並且按照本教程進行操作： https ://egghead.io/lessons/angular-2-angular-2-building-a-toggle-button-component但輸出和eventemitter的整個部分都沒有不行 我沒有收到任何錯誤，我也不知道為什么它不起作用。

這是我的togglelink組件代碼：

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



@Component({
  moduleId: module.id,
  selector: 'app-togglelink',
  templateUrl: 'togglelink.component.html',
  styleUrls: ['togglelink.component.css']
})
export class TogglelinkComponent implements OnInit {

  @Input() state:boolean = true;
  @Output() onChange = new EventEmitter();

  onClick(){
    this.state = !this.state;
    this.onChange.emit(this.state);
  }

  constructor() {}

  ngOnInit() {
  }

}

這是使用切換鏈接組件的首頁組件的代碼：從'@ angular / core'導入{Component，OnInit}; 從“ ../togglelink/togglelink.component”導入{TogglelinkComponent}；

@Component({
  moduleId: module.id,
  selector: 'app-firstpage',
  templateUrl: 'firstpage.component.html',
  styleUrls: ['firstpage.component.css'],
  directives: [TogglelinkComponent]
})
export class FirstpageComponent implements OnInit {

  thetogglestate:boolean = false;

  firsttitle = "the first title";
  constructor() {}

  ngOnInit() {
  }

}

這是首頁組件模板的代碼：{{thetogglestate？ '開關'}}

</p>
<h2 *ngIf="thetogglestate">
  {{firsttitle}}
</h2>
<p>
  firstpage works!
</p>

當我手動更改togglestate時，它確實起作用，因此我知道問題出在輸出和事件發射器部分。

知道為什么嗎？

最好的祝福

Answer 1

在firstpage.component.html模板中，您需要為此事件注冊一些處理，以切換thetogglestate變量的值。

像這樣：

<app-togglelink (onChange)="thetogglestate = !thetogglestate"></app-togglelink>