Изменить переменную, переданную в веб-компонент Angular 8

Question

Я создал веб-компонент (назовем его тестовым компонентом) с Angular 8, который получает входные данные и показывает их браузеру (test.component.html файл)

<h3>{{title}}</h3>

test.component.ts файл получает входные данные и также регистрирует их в консоли

export class TestComponent implements OnInit {
  @input() title;

  constructor() {}
  ngOnInit() {console.log(this.title)}
}

index.html автономного приложения, использующего веб-компонент, выглядит следующим образом:

<test-component title="this is a string"></test-component>

. и записывает его на консоль.

Проблема возникает, когда я использую веб-компонент внутри существующего angular приложения. Переменная, которую я хочу передать веб-компоненту, является Dynami c и происходит из компонента существующего приложения. Я попытался передать его внутри уже существующего компонента (например, existing-application.component.html) двумя различными способами:

<test-component [title]="titleVariable"></test-component>

<test-component title={{titleVariable}}></test-component>

, где titleVariable определяется в связанном файле existing-application.component.html, например,

export class ExistingApplicationComponent implements OnInit {

  titleVariable= 'this is a string';

  constructor() {}
  ngOnInit() {}
}

Здесь, хотя элемент h1 html правильно отображает строку, в которой console.log не определен.

Я также попытался зарегистрировать ее (в веб-компоненте) в ngAfterViewInit () вместо ngOnInit () без всякой удачи.

Кто-нибудь имеет представление о том, почему это может происходить? Заранее спасибо за ваше время

Answer 1

Проблема с крючками жизненного цикла. Вам нужен ngOnChanges() ловушка жизненного цикла, когда вы хотите получить доступ к свойствам input().

NgOnChanges: "Отвечать, когда Angular (пере) устанавливает входные свойства, связанные с данными. Метод получает объект SimpleChanges текущих и предыдущих значений свойств. Вызывается до ngOnInit () и всякий раз, когда изменяется одно или несколько связанных с данными входных свойств. "