角度 2 输出和事件发射器不发射

Question

我正在学习 Angular 2，我遵循本教程：https://egghead.io/lessons/angular-2-angular-2-building-a-toggle-button-component 但是输出和事件发射器的整个部分都不起作用。 我没有收到任何错误，我不知道为什么它不起作用。

这是我的 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() {
  }

}

这是使用 togglelink 组件的 firstpage 组件的代码： 从'@angular/core'导入{组件，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() {
  }

}

这是首页组件模板的代码： {{切换状态？ '开关'}}

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

当我手动更改切换状态时它确实有效，所以我知道问题出在输出和事件发射器部分。

知道为什么吗？

最好的问候

Answer 1

在firstpage.component.html 模板中，您需要为此事件注册一些处理来切换thetogglestate 变量的值。

类似的东西：

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