Angular 5 отправляет @ Input вниз набор компонентов

Question

В компоненте 1 я делаю что-то вроде этого:

<app-child-one [foo]="foo">

И тогда я могу просто использовать значение в ngOnInit. Но в своем дочернем HTML он также хочет использовать это для передачи:

<app-grandchild [foo]="foo">

Поскольку app-grandchild устанавливается до того, как foo будет фактически привязан, контроллер получает значение null. Как мне сделать это правильно, чтобы связанное значение было передано полностью?

Answer 1

Вы можете использовать вход для установки вместо того, чтобы пытаться получить доступ к onInit

вроде так:

@Input()
set foo(value) {
   //do whatever with value that you would do onInit
}

Теперь установщик будет работать каждый раз, когда изменяется входное значение, а не просто смотреть на него в окне

Если вам также нужно получить foo, тогда вы просто добавляете геттер и можете использовать локальную переменную для хранения

private _foo;
@Input()
set foo(value) {
   this._foo = value;
   //do whatever with value that you would do onInit
}
get foo() {
   return this._foo;
}

Это выглядит немного многословно, но позволяет вам обрабатывать случай, когда ваша входная переменная может быть установлена ​​через некоторое время после инициализации, и вам нужно сделать что-то еще со значением. Другие варианты здесь - использовать более поздние хуки жизненного цикла (afterviewinit?) Или использовать совместно используемую службу вместо входных данных. Я не рекомендовал бы пытаться использовать более поздние ловушки жизненного цикла, это может быть самое быстрое решение прямо сейчас, но оно заставляет ваш компонент иметь скрытую временную зависимость, которая может измениться позже и неожиданно сломать ваш компонент.