javascript - Angular 中的依赖注入组件

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

当然，您可以为特定的注入令牌提供任何值（常量、函数、类）。当我们要制作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 }
]