EventEmitter 未在 Angular 9 中发射对象

Question

我的应用架构主要基于输出和输入。一切正常，直到我偶然发现这个问题：我有一个动态组件，用户可以在其中写电影评论，但是我发送到负责与 API 通信的组件的对象没有收到任何东西并且我不知道为什么。是因为动态创建吗？这是代码

HTML 将评论发送到 API

的组件

<div *ngIf="movie">
  <div *ngFor="let m of movie">
    Details of {{m.Title}}

  </div>
  <button (click)="createReview()" mat-raised-button color="primary">Write your own review!</button>
  <template #usersreview>
    <app-reviews [movie]="movie" (sendCreds)="credentialsReceived($event)"></app-reviews>
</template>

  </div>

TS:

export class RightMovieComponent implements OnInit {
@Input() movie:any[]
@ViewChild('usersreview',{ read: ViewContainerRef, static: false }) container;
componentRef: ComponentRef<any>
  constructor(private location:Location, private resolver: ComponentFactoryResolver) { }

  ngOnInit(): void {
  }


  

    createReview(){
       this.container.clear();
      const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(ReviewsComponent);
      this.componentRef = this.container.createComponent(factory);
       this.componentRef.instance.movie = this.movie;
    
    }

credentialsReceived(review:any) {
    console.log(review); -----> nothing on the console, no errors, nothing
    //this.componentRef.destroy(); --->commented
    alert('review submited!');
  }
}

评论组件的 TS

@Input() movie: any[];
  @Output() sendCreds: EventEmitter<any> = new EventEmitter<any>();
  user: User;
  reviewForm: FormGroup;
  movieTitle:any;

  constructor(private auth: AuthService, private fb: FormBuilder) {
    this.auth.currentUser.subscribe((user) => (this.user = user));
  }

  ngOnInit(): void {
    this.reviewForm = this.fb.group({
      title: ['', Validators.required],
      body: ['', Validators.required],
    });
  }
  get title() {
    return this.reviewForm.get('title');
  }
  get body() {
    return this.reviewForm.get('body');
  }

  onSubmit() {
    if (this.reviewForm.invalid) return;
     this.movieTitle = this.movie.map((t) => t['Title']);
    let credentials = {
      author: this.user.username,
      title: this.title.value,
      body: this.body.value,
      movieTitle: this.movieTitle[0],
    };
    this.sendCreds.emit({creds:credentials}); ------>here the the object is displayed on the console
    this.reviewForm.reset();
  }

如有任何帮助，我们将不胜感激！

Answer 1

动态创建组件时，您需要定义与事件发射器的通信（正如您定义与输入的通信一样）：

this.componentRef.instance.sendCreds.subscribe(event => // do whatever);

EventEmitter 未在 Angular 9 中发射对象

EventEmitter not emiting object in Angular 9

eventemitter

output

angular