Question

假设我有一个父组件AppComponent，一个指令MyDrective和一个服务SimpleService

MyDirective用于AppComponent的模板，并用SimpleService装饰器注入Host，因为我不想使用AppComponent中的实例的父母因此我在AppComponent的{{1}}处创建了一个新实例。

但是现在我有一个viewProviders，它是HelloComponent的子级，AppComponent也使用HelloComponent，但是这次我希望MyDirective位于{ {1}}使用MyDirective中的HelloComponent的示例实例，该怎么办？

我尝试过SimpleService，但这会导致循环依赖性错误。

示例代码：https://stackblitz.com/edit/angular-7h352z?file=src%2Fapp%2Fhello.component.ts

Answer 1

只需将此装饰器添加到您的服务中 @Injectable({ providedIn: 'root', })

这应该创建此服务的单例实例。

Answer 2

使用providers属性，以便其内容子级和查看子级可以使用av提供程序。

尝试一下：

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

Example

Answer 3

在构造函数@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
   ) {}

在子组件的viewProviders中的父组件的viewProviders处创建的Angular提供服务

3 个答案: