Я передаю функцию в качестве параметра от родительского к дочернему компоненту. Когда происходит событие щелчка, срабатывает функция родительского компонента, но все свойства родительского компонента не определены. Например,

Родительский компонент

export class AppComponent implements OnInit { constructor( private notificationService: NotificationService ) {} unreadNotification(): Observable{amp}lt;any{amp}gt; { // here this.notificationService is undefined console.log( this.notificationService ); } } 

Родительский HTML

 {amp}lt;notification-menu [unread]= "unreadNotification"{amp}gt;{amp}lt;/notification-menu{amp}gt; 

дочерний компонент

 export class NotificationMenuComponent implements OnInit { @Input() updateUnread: Function; } 

детский HTML

 {amp}lt;button type="button" class="icon-button" (click)="updateUnread()"{amp}gt; {amp}lt;/button{amp}gt; 

Теперь, когда я нажимаю кнопку уведомления, unreadNotification , но значение this.notificationService в console.log не undefined .

Как я могу решить это?

Вы можете использовать функцию arrow чтобы вы могли использовать информацию родительского компонента. Вы можете попробовать как указано ниже.

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

Надеюсь, что ваша проблема будет решена этим.

Вы должны использовать @Input() для передачи значений от родителя к @Output() и @Output() для передачи значений от потомка к родителю .

Дочерний HTML:

 {amp}lt;button type="button" class="icon-button" (click)="update()"{amp}gt; {amp}lt;/button{amp}gt; 

Дочерний компонент:

 export class NotificationMenuComponent implements OnInit { @Output() updateUnread = new EventEmitter{amp}lt;string{amp}gt;(); update() { this.updateUnread.emit("I am working man!"); } } 

Родительский HTML:

 {amp}lt;notification-menu (updateUnread)= "unreadNotification($event)"{amp}gt;{amp}lt;/notification-menu{amp}gt; 

Родительский компонент:

 export class AppComponent implements OnInit { constructor( private notificationService: NotificationService ) {} unreadNotification(dataFromChild: string) { console.log(dataFromChild); } } 

Ответ от @nimeresam — хороший совет — использование @Output — это нелепый способ добиться этого.

Однако стоит отметить, что причина, по которой ваше оригинальное решение не работает, связана с тем, как javascript обрабатывает this контекст.

Запись (click)="updateUnread()" равносильна произнесению this.updateUnread() с этим значением NotificationMenuComponent — поскольку на NotificationMenuComponent не существует NotificationMeru, вы получаете неопределенную ошибку.

Чтобы использовать контекст родительского компонента, вам необходимо связать контекст с функцией updateUnread перед передачей его в дочерний компонент.

Это может быть достигнуто либо путем преобразования функции в функцию arrown, либо с помощью 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 чтобы помочь отлавливать эти ошибки (хотя и не уверены, обнаружит ли это в этом случае)