@Output不断变化的布尔状态

Question

我想将一个布尔值从一个孩子的状态改变为父母。这是我迄今为止所拥有的。

子组件

@Input() state: boolean; 
    @Output() show = new EventEmitter(); 
    @Output() hide = new EventEmitter(); 


    onHover() { 
    this.state = true; 
    this.show.emit(this.state); 
    console.log("state is " + this.state); 


    } 
    onHoverOut() { 
    this.state = false; 
    this.hide.emit(this.state); 
    console.log("state is " + this.state); 

} 

child.html

<a (mouseover)="onHover(show.state)" (mouseleave)="onHoverOut(hide.state)">random Link</a> 

父Component

@Component({ 
    selector: 'my-app', 
    template: '<h3 (show)="toggleState" (hide)="toggleState">toggle state: {{boolshow}}</h3>', 
}) 
export class AppComponent { 
    toggleState: boolean; 
    boolshow = this.toggleState; 
} 

我ñ当我悬停在链接上时，看不到{{boolshow}}。任何帮助都会很棒，谢谢。

Answer 1

1）@input和@Output会当你有父&儿童方案工作。我认为你没有！
2）当事情可以如此简单时，你正在处理很多事情。

---

工作演示：https://plnkr.co/edit/AsmA5DGYTNZNLEAd2O7s?p=preview

注：在这里，我把它优化，以一定的水平。我仍然可以超越这一点，但为了理解目的，我认为就是这样。

---

家长

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

@Component({ 
    selector: 'my-app', 
    template: `<h3>toggle state: {{boolshow}}</h3> 
    <child [state]="boolshow" (toggle)="boolshow=$event" ></child> //<<<=== here we have set parent relation with child component 
    `, 

}) 
export class AppComponent { 
    boolshow = true; 
} 

儿童

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

@Component({ 
    selector: 'child', 
    template: ` 
    <a (mouseover)="onHover()" (mouseleave)="onHoverOut()">random Link</a> 
    ` 
}) 
export class Child { 

    @Input() state: boolean; 
    @Output() toggle = new EventEmitter(); 
    onHover() { 
    this.state = true; 
    this.toggle.emit(this.state); 
    console.log("state is " + this.state); 
    } 
    onHoverOut() { 
    this.state = false; 
    this.toggle.emit(this.state); 
    console.log("state is " + this.state); 
} 
}