Question

是否可以通过某种方式在Angular中注入依赖项组件？我希望能够做到与服务类似的功能，例如：

my.module.ts:
providers: [
   {
      provide: MyService,
      useClass: CustomService
   }
]

我曾尝试在包装器组件中使用* ngIf =“ condition”，但随后它将抱怨没有为我不希望使用的组件提供服务。

Answer 1

如果组件与注入组件之间具有父子关系，则完全有可能。所以如果你有这样的结构

@Component( {
    selector:"app-parent",
    template:" <app-child> </app-child>"
 } )
export class ParentComp { ...}

您可以通过依赖项注入将父组件注入子组件内部

@Component({
    selector:"app-child",
     template:"I am child"
 })
export class ChildComponent{
    constructor(private parentComp:ParentComponent){
}
}

现在，Angular DI将要求您提供子组件所在的父组件，并将为您注入它。

如果您想注入组件而不是父子关系，例如，您想将sidenav组件注入到sidenav之外的某个表组件中，则很难实现（也不推荐），但有可能。如果要执行此操作，则可能应该创建共享服务，该共享服务将在这些组件之间共享状态。

Answer 2

当然，您可以为特定的注入令牌提供任何值（const，function，class）。您可以找到一些示例，其中包含一些组件，这些组件将在我们制作ControlValueAccessor

时提供

@Component({
providers: [     
   { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => CustomInputComponent),
     multi: true     
    }   
]
})
export class CustomInputComponent {...}

您可以创建自己的注入令牌，并提供所需的任何东西以及组件。

/* In tokens.ts */ 
const MY_TOKEN_NAME = new InjectionToken<MyAmazingComponent>('MY_TOKEN_NAME')

/* In module */    
providers: [
  { provide: MY_TOKEN_NAME, useClass: MyAmazingComponent }
]

Angular中的依赖注入组件

2 个答案: