Предотвратить Angular Внедрение Зависимости Предка

Question

Предположим, у меня есть следующий компонент ChildComponent. Он может опционально использоваться внутри ParentComponent, и его поведение изменяется в зависимости от того, используется ли оно внутри ParentComponent, и поэтому в его конструкторе требуется ParentComponent для внедрения зависимости. Надеюсь, ничего спорными до сих пор:

class ChildComponent {
  constructor(@Optional() parentComponent: ParentComponent) {
    // Do stuff based upon whether or not `parentComponent` is defined...
  }
}

Теперь предположим, что ChildComponent также может быть использован внутри компонента FooComponent, со следующей оговоркой. Я хочу от FooComponent до предотвратить любые инъекции предков ParentComponent. Два примера, чтобы продемонстрировать, что я имею в виду:

Пример # 1:

В этом случае ParentComponent должен быть правильно введен в ChildComponent.

<foo-component>
  <parent-component>
    <child-component></child-component>
  </parent-component>
</foo-component>

Пример № 2:

В этом случае ParentComponent не следует вводить в ChildComponent, поскольку он заблокирован с помощью FooComponent.

<parent-component>
  <foo-component>
    <child-component></child-component>
  </foo-component>
</parent-component>

Как правильно это сделать? Я просмотрел различные декораторы здесь (https://angular.io/guide/hierarchical-dependency-injection#hierarchical -инжекторы ) и нашел, что документация сбивает с толку.

Answer 1

Я потратил больше времени на изучение этого и нашел одно решение (не уверен, что это лучший способ выполнить sh это):

FooComponent может обеспечить ParentComponent как undefined в его провайдеры. Следовательно, ChildComponent получит undefined в своем внедрении зависимости. Что-то вроде следующего:

@Component({
  providers: [{provide: ParentComponent, useValue: undefined}],
})
class FooComponent {

}