@Output(), 지금까지의 데이터와 비교하여 !

Imagine o cenário acima, que na qual por algum motivo precisamos avisar o componente modal(Pai) que houve um click no botão(Filho), para que assim o componente pai através de um método que só ele tem contabilize o total de clicks em seu 컴포넌트 필터.

Então, se formos pensar em algumas possibilidades para utilizar o método que contabiliza o total de click poderíamos talvez criar uma service e remover o método do componente pai, e se você for bem "malaco"talvez possa pensar na idéia de importar o componente-pai .component.ts dentro do componente-filho.componente.ts, o que como meu líder Vitor Hugo, o "Vitão"disse, é extremamente e simplesmente proibido importar componente.ts ! ㅋ

이제 @Output()을 독점할 수 없습니다.

속성 @Output()

@Output()을 사용하거나 허용할 수 있는 자산을 소유하거나 구성 요소 파일을 구성 요소 파이에 추가할 수 있습니다. Essa는 @angular/core에서 EventEmiter가 @angular/core를 통해 구성 요소 파일을 생성하지 않고 구성 요소 파일을 사용하지 않도록 이벤트 알림을 생성합니다.

수행하는 방법 ...

Primeiro, precisamos importar o Output e nosso EventEmitter na classe do nosso componente:

import { Output, EventEmitter } from '@angular/core';

Depois, precisamos declarar nossa @Output(), que será como "a nossa fala"para nosso componente pai:

@Output() houveUmClick = new EventEmitter<void>();

constructor() {}

Nosso new EventEmitter, diz que o angular tem que criar um emissor de eventos do tipo void, mas, podemos passar string, objetos e tudo mais. Porém, em nosso exemplo precisamos só emitir que ocorreu um click, então podemos passar como void !

Depois de criado, precisamos pensar quando queremos informar para nosso componente pai que houve um click, como por exemplo no cenário abaixo:

Quando um método retornar sucesso ou simplesmente quando for iniciado, então, declaramos:

ngOnInit(): void {

   this.houveUmClick.emit();
}

Na linha de código, queremos dizer o seguinte:

Angular, você você iniciar o componente, fala para o componente pai que se estiver me ouvindo que houve um click e que ele resolve o que fazer, e fazemos isso através do .emit();

모든 구성 요소는 EventEmitter()에 포함되어 있습니다. E quando fossemos emitir que houve uma ação, em nosso emit() passaríamos o que nosso componente pai esta esperando. No caso do exemplo, só precisamos alertar que houve um evento com o componente filho então podemos passar vazio.

E após isso, esta feito, nosso componente filho ja esta falando houve um evento com ele, agora nosso componente pai precisa passar a nos ouvir.

Como ouvir nosso componente filho ...

다음은 @Output()이 구성 요소 파일 또는 구성 요소 파일의 정확도를 높이는데 필요한 요소이므로 다음과 같은 형식으로 입력하십시오.

모든 구성 요소를 html로 선언하거나 @Output()에 대한 정확한 정보를 입력하지 않고 다음 형식으로 구성 요소를 추가할 수 있습니다.

<div class="main-content">
   <app-component-button (houveUmClick)="adicionaMaisUmCickContabilizado()"></app-component-button>
</div>

Então, o houveUmClick é o nome da "forma"que nosso filho irá falar com a gente, e após ele falar, eu pego e chamo o método do componente pai que é adicionaMaisUmCickContabilizado() e nele eu faço o que é é preciso.

Vale lembrar que podemos passar mais de um emissor e para mais de um componente filho. 아고라, uma pergunta super válida:

E se eu precisar que o componente "vô"do meu componente pai saiba que houve um click? Se eu precisasse subir um nível ainda na hierarquia ?

응답은 간단합니다. @Output()은 모든 구성요소에 대해 @Output()이 아닌 다른 구성 요소를 사용할 수 있으며, 구성 요소와 구성 요소가 "vô "passaria a escuta-lo e fazer o que precisa ser feito :D

Obrigado pela leitura e até a próxima! :디 :디