[英]Angular 2 eventEmitter dosen't work
I need to make something simple, I want to display a dialog when I click on an help icon. 我需要做一些简单的事情,我想在点击帮助图标时显示一个对话框。
I have a parent component: 我有一个父组件:
@Component({
selector: 'app-quotation',
templateUrl: './quotation.component.html'
})
export class QuotationComponent implements OnInit {
public quotation: any = {};
public device: string;
public isDataAvailable = false;
@Output() showPopin: EventEmitter<string> = new EventEmitter<string>();
constructor(private quotationService: QuotationService,
private httpErrors: HttpErrorsService,
private popinService: PopinService) {}
moreInfo(content: string) {
console.log('here');
this.showPopin.emit('bla');
}
}
And his html: 和他的HTML:
<ul>
<li *ngFor="let item of quotation.HH_Summary_TariffPageDisplay[0].content">
<label></label>
<i class="quotation-popin" (click)="moreInfo()"></i>
<div class="separator"></div>
</li>
</ul>
My popin component: 我的popin组件:
@Component({
selector: 'app-popin',
templateUrl: './popin.component.html',
styleUrls: ['./popin.component.scss']
})
export class PopinComponent implements OnInit {
public popinTitle: string;
public popinContent: string;
public hidden: boolean = true;
constructor() { }
openPopin(event):void {
console.log("here");
this.hidden = false;
}
}
His HTML: 他的HTML:
<div class="card-block popin-container" (showPopin)="openPopin($event)" *ngIf="!hidden">
<div class="card">
<div class="popin-title">
{{ popinTitle }}
<i class="icon icon-azf-cancel"></i>
</div>
<div class="popin-content">
{{ popinContent }}
</div>
</div>
</div>
My parent component is loaded in a router-outlet and my popin is loaded on the same level than the router-outlet, like this: 我的父组件加载到路由器插座中,我的popin加载到与路由器插座相同的级别,如下所示:
<app-nav-bar></app-nav-bar>
<app-breadcrumb></app-breadcrumb>
<div class="container">
<router-outlet></router-outlet>
</div>
<app-popin></app-popin>
My problem is the eventEmitter doesn't work and i don't know why, someone can explain me ? 我的问题是eventEmitter无法正常工作,我不知道为什么,有人可以解释一下吗?
thx, 谢谢,
regards 问候
EventEmitters only work for direct Parent-Child component relationships. EventEmitters仅适用于直接的Parent-Child组件关系。 You do not have this relationship with the components you are describing here.
您与此处描述的组件没有此关系。
In a parent-child relatonship, we will see the child's component element within the parent's template. 在父子关系中,我们将在父模板中看到子组件元素。 We do not see this in your example.
我们在您的示例中没有看到这一点。
You have two options: 您有两种选择:
If you go with option 2, the service should just contain an observable that one component calls next on, and the other component subscribes to. 如果使用选项2,则服务应该只包含一个组件接下来调用的observable,另一个组件订阅。
@Injectable()
export class PopinService {
showPopin = new ReplaySubject<string>(1);
}
Inject this in QuotationComponent and modify moreInfo
在QuotationComponent中注入它并修改
moreInfo
moreInfo(content: string): void {
this.popinService.showPopin.next('bla' + content);
}
In PopinComponent inject the popinService and add the following: 在PopinComponent中注入popinService并添加以下内容:
ngOnInit() {
this.popinService.showPopin.subscribe(content => {
this.hidden = false;
this.popinContent = content;
});
}
It's because you misuse it. 这是因为你滥用它。
In your popin component, you just call the function and do a log, and set a variable to false. 在popin组件中,只需调用函数并执行日志,并将变量设置为false。
And nowhere I can see that you use the app-quotation
selector, so you don't really use it, do you ? 无处可见我使用
app-quotation
选择器,所以你没有真正使用它,是吗?
Looks like you are sending an output to a child component (popin) . 看起来您正在向子组件(popin)发送输出。 Ideally if you give output that means it should be from child to parent and from parent to child, it is Input.
理想情况下,如果你给出输出意味着它应该是从子到父,从父到子,它是输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.