Хост-компонент изменяет поведение дочернего компонента

Question

Предположим, у меня есть следующий компонент Child.

@Component({...})
class Child {
  @Input() mySpecialFlag: boolean;
}

Child, который может быть использован как автономный компонент или может быть обернут компонентом Special, который "охватывает"«Поведение Child.Когда Child используется автономно, пользователь может выбрать для [mySpecialFlag] значение true или false.Когда Child используется внутри Special, я хочу, чтобы компонент Special заставил ввод [mySpecialFlag] быть истинным, через что-то вроде следующего:

@Component({...})
class Special {
  @ContentChild(Child) child;
  ...
  ngAfterContentInit() {
    this.child.mySpecialFlag = true;
  }
} 

Проблема с вышеупомянутымчто он устанавливает [mySpecialFlag] слишком поздно .Я хочу иметь возможность установить для этого флага значение true до запуска любого из методов жизненного цикла ребенка или, по крайней мере, до запуска ngAfterContentInit ребенка.Это возможно?

Answer 1

Полагаю, вы могли бы использовать метод ngOnInit.Ссылка, поясняющая угловые крючки жизненного цикла: https://angular.io/guide/lifecycle-hooks

Answer 2

Установка флага в ngOnInit родительского элемента, кажется, работает: флаг установлен перед ngOnInit дочернего компонента.

ngOnInit() {
  this.child.mySpecialFlag = true;
}

См. этот стек длядемо.

Альтернативный метод для доступа к дочернему компоненту как можно раньше - это связать декоратор @ContentChild со свойством getter / setter и установить дочерний флаг в установщике:

export class ParentComponent {

  private _child: ChildComponent;

  @ContentChild(ChildComponent) get child(): ChildComponent {
    return this._child;
  }
  set child(val: ChildComponent) {
    this._child = val;
    this._child.mySpecialFlag = true;
  }
}

См. это стекаблиц для демонстрации.Обратите внимание, что закрытая переменная _child и метод получения не нужны для установки флага.Я добавил их на случай, если вам понадобится обратиться к дочернему компоненту для других целей.