问题描述
我正在将一个函数作为参数从父组件传递给子组件。 当点击事件发生时，会触发父组件的功能，但父组件的所有属性都是未定义的。 例如，
父组件
export class AppComponent implements OnInit {
constructor( private notificationService: NotificationService ) {}
unreadNotification(): Observable<any> {
// here this.notificationService is undefined
console.log( this.notificationService );
}
}
父 html
<notification-menu [unread]= "unreadNotification"></notification-menu>
子组件
export class NotificationMenuComponent implements OnInit {
@Input() updateUnread: Function;
}
子HTML
<button type="button" class="icon-button" (click)="updateUnread()">
</button>
现在，当我单击通知按钮时，会触发unreadNotification ，但console.log中this.notificationService值是undefined 。
我该如何解决这个问题？
1楼
您应该使用@Input()将值从parent传递到child和@Output()将值从child传递到parent 。
子 HTML：
<button type="button" class="icon-button" (click)="update()">
</button>
子组件：
export class NotificationMenuComponent implements OnInit {
@Output() updateUnread = new EventEmitter<string>();
update() {
this.updateUnread.emit("I am working man!");
}
}
父 HTML：
<notification-menu (updateUnread)= "unreadNotification($event)"></notification-menu>
父组件：
export class AppComponent implements OnInit {
constructor( private notificationService: NotificationService ) {}
unreadNotification(dataFromChild: string) {
console.log(dataFromChild);
}
}
2楼
@nimeresam 的答案是很好的建议 - 使用@Output是实现这一目标的@Output方法。
不过值得注意的是，您的原始解决方案不起作用的原因是 javascript 处理this上下文的方式。
写(click)="updateUnread()"相当于说this.updateUnread()并且 this 是NotificationMenuComponent - 因为 NotificationMenuComponent 上不存在 notificationService 你会得到未定义的错误。
要使用父组件的上下文，您需要updateUnread上下文绑定到updateUnread函数，然后再将其传递给子组件。
这可以通过将函数转换为箭头函数或使用Function.bind
看：
为--noImplicitThis启用--noImplicitThis选项以帮助捕获这些错误通常是个好主意（尽管不确定在这种情况下是否会检测到它）
3楼
您可以使用arrow功能，以便您可以使用父组件的信息。
您可以尝试如下所示。
updateUnreadNotification = () => {
// by using arrow function you can get notificationService information
console.log( this.notificationService );
}
希望您的问题将由此得到解决。