Question

我正在将一个函数作为参数从父组件传递给子组件。发生单击事件时，将触发父组件的功能，但父组件的所有属性均未定义。例如，

父组件

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，但是this.notificationService中console.log的值为undefined。

我该如何解决？

Answer 1

您应该使用@Input()将值从 parent 传递到 child ，并使用{{11}}将值从 child 传递到 parent 。

子HTML：

@Output()

子组件：

<button type="button" class="icon-button" (click)="update()">
</button>

父HTML：

export class NotificationMenuComponent implements OnInit {
    @Output() updateUnread = new EventEmitter<string>();

    update() {
        this.updateUnread.emit("I am working man!");
    }
}

父项：

<notification-menu (updateUnread)= "unreadNotification($event)"></notification-menu>

Answer 2

@nimeresam的回答是一个很好的建议-使用@Output是实现这一目标的一种惯用方式。

但是值得注意的是，原始解决方案无法正常工作的原因是JavaScript处理this上下文的方式。

写(click)="updateUnread()"等效于说this.updateUnread()，NotificationMenuComponent是-由于NotificationMenuComponent上没有NotificationService，您会得到未定义的错误。

要使用父组件的上下文，您需要先将上下文绑定到updateUnread函数，然后再将其传递给子组件。

这可以通过将函数转换为箭头函数或使用Function.bind

来实现。

请参阅：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

为--noImplicitThis启用typescript选项通常是一个好主意，以帮助捕获这些错误（尽管不确定在这种情况下是否会检测到它）

Answer 3

您可以使用arrow函数，以便可以使用父组件的信息。您可以尝试如下所示。

updateUnreadNotification = () => {
   // by using arrow function you can get notificationService information
   console.log( this.notificationService );
}

希望您的问题将由此解决。

Angular-无法获取父组件数据

3 个答案: