Angular предоставляет сервис, созданный в viewProviders родительского компонента в viewProviders дочернего компонента

Question

Допустим, у меня есть родительский компонент AppComponent, директива MyDrective и служба SimpleService

MyDirective используется в шаблоне AppComponent и вводит SimpleService с Host декоратором, так как я не хочу использовать экземпляр из родительского элемента AppComponent, поэтому я создаю новый экземпляр в AppComponent viewProviders.

Но теперь я у меня есть HelloComponent, который является потомком AppComponent, HelloComponent, также используйте MyDirective, но на этот раз я хочу, чтобы MyDirective внутри HelloComponent использовал образец экземпляра SimpleService из AppComponent, как я должен делать?

Я пытался {provide: SimpleService, useExisting: SimpleService}, но это приводит к циклической c ошибке зависимости.

пример кода: https://stackblitz.com/edit/angular-7h352z?file=src%2Fapp%2Fhello.component.ts

Answer 1

Используйте свойство провайдеров, чтобы его провайдер был доступен для его дочерних и просматриваемых дочерних материалов.

Попробуйте:

providers: [{provide: SimpleService, useValue: SimpleService }]

Пример

Answer 2

использовать в конструкторе @SkipSelf ()

@Component({
  selector: 'hello',
  template: `child <input myDirective >{{value}}`,
  styles: [`h1 { font-family: Lato; }`],
  viewProviders: [SimpleService]

})
export class HelloComponent implements OnInit  {
  constructor(@Host() @Optional() @SkipSelf() private simpleService: SimpleService) {}
  value:any
  ngOnInit()
  {
    this.value=this.simpleService?this.simpleService.message:"No service"
  }
}

ПРИМЕЧАНИЕ. Если вы хотите получить оба: вы можете добавить собственный сервис как

  constructor(
     @Host() @Optional() @SkipSelf() private simpleService: SimpleService
     private simpleServiceChild:SimpleService
   ) {}

Answer 3

Просто добавьте этот декоратор к вашему сервису @Injectable({ providedIn: 'root', })

Это должно создать единичный экземпляр этого сервиса.