Получить значение @Input () из дочернего кода возвращает неопределенное

Question

Я не могу использовать значение, данное родителем в коде дочернего компонента.Я не понимаю, почему ... В моем родительском HTML я установил компонентный app-courses-array со значением хэштега (value1)

<app-courses-array [eventHashtag]="value1"></app-courses-array>

Мой дочерний HTML работает, и хэштег события хорошо

<div class="panel-heading">
      Hashtag received {{ eventHashtag }}
</div>

Но когда я пытаюсь получить его в коде моего дочернего компонента (сделать что-то еще с ним), я просто получаю "undefined":

export class CoursesArrayComponent {

   @Input() eventHashtag: string;

   constructor() {
       console.log("Value of hashtag", this.eventHashtag);
       // this displays "Value of hashtag undefined" on the console
   }
}

Anyидея

Answer 1

Это не будет доступно в constructor. Будет доступно в ngOnChanges. Это метод, который вызывается при изменении @Input свойств компонента.

Попробуйте войти в систему в

ngOnChanges() {
    console.log(this.eventHashtag); 
}

Кроме того, реализуйте хук жизненного цикла OnChanges, который обеспечивает Angular. Вы можете импортировать его из @angular/core

import { Component, OnChanges } from '@angular/core';

Answer 2

вы получаете эти value1 данные через запрос на получение или что-то еще? Если это так, то это может быть связано с тем, что компонент загружается до получения данных value1. Чтобы противостоять этому, вы можете добавить * ngIf в массив app-courses следующим образом:

<app-courses-array *ngIf="value1" [eventHashtag]="value1"></app-courses-array>

теперь компонент будет загружен только после того, как данные value1 не будут неопределенными. (неопределенное значение равно ложному)

Вот ссылка, которая объясняет разницу между конструктором и ngOninit и может также объяснить, почему ваша переменная выглядит неопределенной: https://toddmotto.com/angular-constructor-ngoninit-lifecycle-hook Короче говоря, конструктор является частью ECMA6 (javascript), а не угловым. Он используется для инициализации регулярных переменных в его теле, но вы также можете использовать его для внедрения угловых компонентов в класс, объявив его как аргумент конструктора

Answer 3

Это обычно, свойство Input не инициализируется до тех пор, пока не будет настроено представление. Вы можете получить доступ к своим данным в методе ngOnInit.

 ngOnInit() {
    console.log(this.eventHashtag); 
 }