Início / coding / Perguntas / 77782679
Accepted
Ole
Asked: 2024-01-09 03:03:04 +0800 CST

Observando emissores de eventos @Output em componentes filhos?

  • 772

Como deve ser feito o uso/observação @Output()de emissores de eventos pais em componentes filhos?

Por exemplo, nesta demonstração, o componente filho usa o @Output onGreetingChangeseguinte:

<app-greeting [greeting]="onGreetingChange | async"></app-greeting>

E isso funcionará se onGreetingChangefor emitido no AfterViewInitgancho do ciclo de vida.

  ngAfterViewInit() {
    this.onGreetingChange.emit('Hola');
  }

No entanto, isso produz um ExpressionChangedAfterItHasBeenCheckedErrorerro.

Existe uma maneira de fazer isso funcionar sem produzir o erro?

Tentei emitir em ambos constructore OnInit. Pensamentos?

javascript

3 respostas

  1. Best Answer

    Você pode acionar change detectionmanualmente, usandodetectChanges()

    Meu palpite é que, por ser uma forma não convencional de alterar uma @Inputdetecção de alterações, faltam as alterações, então precisamos executá-la manualmente!

      ngAfterViewInit() {
    this.onGreetingChange.emit('Hola');
    this.cdr.detectChanges();
  }

    stackblitz

    • 1

  2. Você sempre pode usar BehaviorSubjectem vez de EventEmitter. A vantagem está no valor inicial. Veja isso:

    https://stackblitz.com/edit/stackblitz-starters-bncmrb?file=src%2Fmain.ts

    Aplicativo principal

    @Component({
  selector: 'app-root',
  imports: [AppChild, AppChildTwo, AsyncPipe],
  standalone: true,
  templateUrl: './app.component.html',
})
export class App implements OnInit, AfterViewInit {
  @Output()
  // onGreetingChange: EventEmitter<string> = new EventEmitter();
  onGreetingChange = new BehaviorSubject('Hola!!');

  greetingTwo!: string;

  constructor() {
    //    this.onGreetingChange.emit('Hola!!');
  }

  ngOnInit() {
    // this.onGreetingChange.emit('Hola!!');
  }

  ngAfterViewInit() {
    // this.onGreetingChange.emit('Hola');
  }
}

    HTML

    <div><app-greeting [greeting]="onGreetingChange | async"></app-greeting></div>
<div>
  <app-greeting-two (greetingTwo)="greetingTwo = $event"></app-greeting-two>
</div>
<h2>{{ greetingTwo }}</h2>

    Criança um

    @Component({
  selector: 'app-greeting',
  standalone: true,
  template: '<h1>{{ greeting }} Everyone!</h1>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class AppChild {
  @Input()
  greeting!: string | null;
}

    Criança dois

    @Component({
  selector: 'app-greeting-two',
  standalone: true,
  template: '<h1>AppChildTwo: {{ greetingTwo | async }} Everyone!</h1>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [AsyncPipe],
})
export class AppChildTwo {
  @Output()
  greetingTwo = new BehaviorSubject('Initial greeting TWO');
}
    • 0

  3. É melhor usar ChangeDetectionStrategy.OnPushpara desempenho

    @Component({
  selector: 'app-root',
  imports: [AppChild, AsyncPipe],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-greeting [greeting]="onGreetingChange | async"></app-greeting>
  `,
})
export class App implements OnInit, AfterViewInit { 
  @Output()
  onGreetingChange = new EventEmitter<string>();

  ngAfterViewInit() {
    this.onGreetingChange.emit('Hola');
  }}

    Exemplo de código https://stackblitz.com/edit/stackblitz-starters-grepmj?file=src%2Fmain.ts

    • -1

relate perguntas