@Output изменение логического состояния

#angular

Вопрос:

Я пытаюсь изменить состояние логического значения с дочернего на родительское. Это то, что у меня есть до сих пор.

дочерний компонент

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

Я не вижу изменения {{boolshow}} при наведении курсора мыши на ссылку. любая помощь была бы отличной, спасибо.

1. Нет никакой связи между родительским и дочерним. Вы даже не передаете state переменную от родительского элемента к дочернему.

2. Я действительно хочу понять, а я нет. Я думал, что (mouseover)="onHover(show.state) это делает это …. а затем подбирает его в родительском компоненте в логике тегов h3 (show)="toggleState"

3. Что такое ваш дочерний селектор?

Ответ №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);
 }
}

1. У меня есть еще один быстрый вопрос, что вы делаете, если у вашего дочернего элемента нет селектора? т.Е. Его в <router-outlet> теге или что-то в этом роде, я думаю, это будет применяться противоположным образом, например, родительский к дочернему @micronyks

2. Затем он становится родственными компонентами, не имеющими отношения. Так что в этом случае вы можете использовать service with Rxjs library (BehaviourSubject) и заставить его работать так, как вам нужно.

Ответ №2:

Вы также можете упростить код с помощью

 [(state)]="boolshow"

Родительский

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

@Component({
  selector: 'my-app',
  template: `<h3>toggle state: {{boolshow}}</h3>
  <child [(state)]="boolshow" ></child>
  `,

})
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() changeState: EventEmitter<boolean> = new EventEmitter();

  onHover() {
    this.state = true;
    this.changeState.emit(this.state);
    console.log("state is "   this.state);
  }
  onHoverOut() {
    this.state = false;
    this.changeState.emit(this.state);
    console.log("state is "   this.state);
  }

}