Angular中的依赖注入组件

Question

Is it possible to somehow dependency inject components in Angular? I would like to be able to do something similar to what you can do with services eg:

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

I have tried to use *ngIf="condition" in a wrapper component, but it will then complain about services not being provided for the components I do not wish to use.

Answer 1

It is fully possible if you have parent-child relationship between the component and injecting component. so if you have the structure like this

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

you could inject parent-component inside the child component via dependency injection

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

Angular DI will now that you are asking for parent component that child component lives in and will inject it for you.

If you want to inject component not parent-child relationship like, so for example you want to inject the sidenav component into the some table component that lives outside the sidenav, it is hardly achiavable (not recommended also), but possible. if you want to do that, you should probably create shared service, that will share the states between these components.

Answer 2

Sure, you can provide any value (const, function, class) for the particular injection token. You can find some examples with components providing when we are going to make ControlValueAccessor

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

You can create your own injection token and provide any stuff you want and components also.

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

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