@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); 
} 
}