Angular EventEmitter未发射角度为9的对象
我的应用程序架构主要基于输出和输入。一切正常,直到我偶然发现这个问题:我有一个动态组件,用户可以在其中编写电影评论,但我发送给负责与API通信的组件的对象没有收到任何东西,我也不知道为什么。是因为动态创造吗?这是密码 将审查发送到API的组件的HTMLAngular EventEmitter未发射角度为9的对象,angular,output,eventemitter,Angular,Output,Eventemitter,我的应用程序架构主要基于输出和输入。一切正常,直到我偶然发现这个问题:我有一个动态组件,用户可以在其中编写电影评论,但我发送给负责与API通信的组件的对象没有收到任何东西,我也不知道为什么。是因为动态创造吗?这是密码 将审查发送到API的组件的HTML <div *ngIf="movie"> <div *ngFor="let m of movie"> Details of {{m.Title}} </div&
<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>
{{m.Title}的详细信息
写你自己的评论!
TS:
导出类RightMovieComponent实现OnInit{
@Input()电影:任意[]
@ViewChild('usersreview',{read:ViewContainerRef,static:false})容器;
componentRef:componentRef
构造函数(私有位置:位置,私有解析器:ComponentFactoryResolver){}
ngOnInit():void{
}
createReview(){
this.container.clear();
常量工厂:ComponentFactory=this.resolver.resolveComponentFactory(ReviewComponent);
this.componentRef=this.container.createComponent(工厂);
this.componentRef.instance.movie=this.movie;
}
已收到证书(审核:任何){
log(review)--->控制台上没有任何内容,没有错误,没有内容
//this.componentRef.destroy();-->
警报(“提交审查!”);
}
}
审查部分的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();
}
@Input()电影:任意[];
@Output()sendCreds:EventEmitter=neweventemitter();
用户:用户;
评审形式:FormGroup;
电影名称:任何;
构造函数(私有auth:AuthService,私有fb:FormBuilder){
this.auth.currentUser.subscribe((user)=>(this.user=user));
}
ngOnInit():void{
this.reviewForm=this.fb.group({
标题:['',验证器。必填],
正文:['',验证器。必填],
});
}
获取标题(){
返回此.reviewForm.get('title');
}
获取body(){
返回此.reviewForm.get('body');
}
onSubmit(){
如果(此.reviewForm.invalid)返回;
this.movieTitle=this.movie.map((t)=>t['Title']);
让凭据={
作者:this.user.username,
标题:this.title.value,
body:this.body.value,
movieTitle:this.movieTitle[0],
};
this.sendCreds.emit({creds:credentials});------>在这里,对象显示在控制台上
这个.reviewForm.reset();
}
任何帮助都将不胜感激 动态创建组件时,您需要定义与事件发射器的通信(正如您定义的与输入的通信):
this.componentRef.instance.sendCreds.subscribe(event => // do whatever);
动态创建组件时,您需要定义与事件发射器的通信(正如您定义的与输入的通信):
this.componentRef.instance.sendCreds.subscribe(event => // do whatever);
你能给我分享一下应用程序审查模板吗?-@Mellville你能给我分享一下应用审查模板吗@梅尔维尔谢谢!当然有道理!当然有道理