如何通过其消费模块指定 Angular 组件的依赖关系

Question

我有一个组件（恰好是一个包装了 FullCalendar 的日历），它将被三个类似的模块使用。每个模块都有相应的服务，提供事件管理（日历事件的获取、推送、post和删除）。依赖于日历组件的消费者，我需要让它使用相应的服务。我所有的谷歌搜索都只找到了可以在运行时间在提供程序数组中确定依赖注入（通过工厂）的示例，但我没有找到任何关于它何时依赖于使用模块的信息。我只是希望我必须从抽象 class 扩展所有服务才能帮助它工作。

Answer 1

基本上是的。

在 Angular 中，组件将向上遍历树（直到根）以找到 class（或注入令牌）的第一个可能提供者。

因此，如果您的“包装”组件（或模块，或树上的任何其他内容）提供该服务，您的“内部”日历可以注入它。

需要注意的是，您提供摘要 class，但使用其他 class，例如

export class MyAbstractService {
}

@Injectable()
export class ConcreteImplementation1 extends MyAbstractService {
}

@Injectable()
export class ConcreteImplementation2 extends MyAbstractService {
}

@Component({
    selector: 'wrapper-1',
    templateUrl: 'wrapper-1.component.html',
    styleUrls: ['./wrapper-1.component.scss'],
    providers: [{ provide: MyAbstractService, useClass: ConcreteImplementation1 }]
})
export class Wrapper1Component {    
}

@Component({
    selector: 'wrapper-2',
    templateUrl: 'wrapper-2.component.html',
    styleUrls: ['./wrapper-2.component.scss'],
    providers: [{ provide: MyAbstractService, useClass: ConcreteImplementation2 }]
})
export class Wrapper2Component {    
}



@Component({
    selector: 'calendar',
    templateUrl: 'calendar.component.html',
    styleUrls: ['./calendar.component.scss'],
})
export class Wrapper2Component {
    constructor(private readonly myService: MyAbstractService) {
        // Will be ConcreteImplementation1 inside wrapper1
        // and ConcreteImplementation2 inside wrapper2
    }
}

如何通过其消费模块指定 Angular 组件的依赖关系

How to specify a dependency of an Angular component by its consuming module

dependency-injection

angular