1
votes

Pourquoi @Output n'émet rien (en angulaire 8)

J'essaye de transférer un objet vers un composant pot via @Output.

Mais emit ne renvoie rien et quand vous le mettez dans le journal, il n'est pas défini.

C'est mon code:

Composant émetteur:

<app-ir-graph-d3  [node]="nodes" [link]="links" [Setting]="Setting" (menubuttonclicked)="emit"></app-ir-graph-d3>

html émetteur:

ngOnChanges(changes: SimpleChanges): void {
    if (changes['emit']) {
      console.log(this.emit);
    }
  }

Composant destinataire: p>

<button *ngFor ="let button of Setting.menu" (click)="clickedmenu(button.id)" mat-menu-item>
    <mat-icon>{{button.icon}}</mat-icon>
    <span>{{button.name}}</span>
  </button>

Mais rien ne peut être imprimé sur la console. J'ai donné la variable d'émission pour obtenir la sortie mais aucune valeur dedans. Quelqu'un connaît-il le problème?

Mettre à jour

Composant destinataire:

@Output() menubuttonclicked = new EventEmitter<object>();
.
.
.
clickedmenu(id: string) {
    this.rclickemit.buttonid = id ;
    this.menubuttonclicked.emit(this.rclickemit);
  }

javascript typescript angular

2 commentaires

Si vous ne pouvez rien enregistrer, c'est probablement parce que rien ne déclenche votre hook de cycle de vie ngOnChanges . Assurez-vous également d'émettre quelque chose correctement en premier.

Afficher le code HTML du parent ou de la partie associée. Vous devez utiliser (menubuttonclicked) = parentFuction ($ event) sur la balise html enfant

4 Réponses :

2
votes

Vous devez gérer la Sortie . Laissez-moi vous montrer un exemple:

yourOutputComponent.ts:

export class fooComponent implements OnInit {
    hello(event:any) {
        console.log(event);
    }
}

et le composant abonné fooComponent.html:

<yourOutput (change)="hello($event)"></yourOutput>

fooComponent.ts:

export class yourOutputComponent implements OnInit {
  @Output() change = new EventEmitter();

  onClick(){
    this.change.emit({newValue: 'I am your data' });
  }
}

0 commentaires

3
votes

L'émetteur d'événement de sortie est utilisé comme attribut entre parenthèses. Par exemple:

Dans votre modèle de destinataire:

onMenuButtonClicked = (buttonID) => {
   console.log(buttonID)
}

Dans votre composant de destinataire:

<app-transmitter-component (menubuttonclicked)="onMenuButtonClicked($event)"></app-transmitter-component>

Pour en savoir plus: https://angular.io/guide/component-interaction

ngOnChanges est appelé lorsqu'un changement intervient au niveau des propriétés liées aux données telles que les propriétés @Input .

OnChange: https://angular.io/api/core/OnChanges

0 commentaires

0
votes

Vous devez écouter les changements dans le html du composant Recipient et non les ngOnChanges

<recipient-component (menubuttonclicked)='clickHandler($event)'></recipient-component>

Ensuite, dans le fichier dactylographié, vous déclarez le clickHandler et recevez-y l'entrée.

0 commentaires

0
votes

Partout où dans le composant de transmission vous avez utilisé le composant de destinataire Veuillez écrire la variable eventEmmiter et écouter cet événement dans le composant de destinataire.

matButtonClicked(event) {
 console.log(event) // 'this.rclickemit'
}

composant de destinataire

<Recipient Component (menubuttonclicked) = "matButtonClicked($event)">

0 commentaires