angular - 如何使用特定的注入(inject)器在 ng-bootstrap 模式中打开组件?

标签 angular bootstrap-modal ng-bootstrap

我开始使用 ng-bootstrap modal 在弹出窗口中打开我的组件。我有很多组件,每个组件都需要你自己的注入(inject)器,因为每个组件都使用相同服务的不同实例。有没有办法像“ViewContainerRef”中那样传递组件和注入(inject)器:

let componentRef = viewContainerRef.createComponent(myComponentFactory, 0, myInjector, []);

我需要这样的东西:

NgbModal.open(MyComponet, myInjector);

谢谢。


编辑以添加更多详细信息。

我需要注入(inject)的服务和对象是在运行时确定的,如下所示:

// Services
@Injectable()
export class MyService1 {
    constructor(
        @Inject('ServiceProvider') private _serviceProvider: any
    ) { }
}

@Injectable()
export class MyService2 {
    constructor(
        @Inject('ServiceProvider') private _serviceProvider: any
    ) { }
}

// Components
@Component({
   ...
})
export class CompA {
    constructor(
        @Inject('MyService') private _service: MyService1 | MyService2,
        @Inject('MyParentService') private _parentService: MyService1 | MyService2
    ) { }
}

@Component({
   ...
})
export class CompB {
    constructor(
        @Inject('MyService') private _service: MyService1 | MyService2,
        @Inject('MyParentService') private _parentService: MyService1 | MyService2
    ) { }
}

因此,当用户请求一个 Action 时,我需要提供正确的服务(对于组件)和正确的“ServiceProvider”(对于服务)。这是父级中发生的情况:

switch (action) {
    case 'one':
        providers = [
            {provide: 'MyService', useClass: MyService1},
            {provide: 'ServiceProvider', useValue: this._objectsA}
        ];
        break;
    case 'two':
        providers = [
            {provide: 'MyService', useClass: MyService2},
            {provide: 'ServiceProvider', useValue: this._objectsB}
        ];
        break;
}

providers = providers.concat([
    {provide: 'MyParentService', useValue: this._service}
]);

switch (context) {
    case 'add':
        component = compA;
        break;
    case 'edit':
        component = compB;
        break;
}

let resolvedProviders = ReflectiveInjector.resolve(providers),
    childInjector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this._injector);

// It was good if I'm able to resolve the component dynamically
let factory = this._componentFactoryResolver.resolveComponentFactory(component);

// And finally open my popup
this._ngbModal.open(factory, childInjector);

// Like when we use the viewContainerRef
// let componentRef = viewContainerRef.createComponent(factory, 0, childInjector, []);

最佳答案

它不是默认工作吗?

假设您有两个组件,每个组件都声明相同的服务:

@Component({
  providers: [MyService]
})
export class CompA {
  constructor(private service: MyService) { }
}

@Component({
  providers: [MyService]
})
export class CompB {
  constructor(private service: MyService) { }
}

然后,当您通过模态服务实例化这些组件时:

NgbModal.open(CompA);
NgbModal.open(CompB);

他们每个人都得到一个不同的 MyService 实例,不是吗?

关于angular - 如何使用特定的注入(inject)器在 ng-bootstrap 模式中打开组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42568336/

相关文章:

javascript - *ng如果未按预期工作

javascript - Angular Bootstrap 多个预输入组件轻拂

angular - 错误 TS2307 : Cannot find module '@ng-bootstrap/ng-bootstrap'

javascript - 模态打开时如何发送参数json数组?

html - asp mvc 默认生成的应用程序删除空格

javascript - 验证按钮单击的时间,以便在日期时间选择器中显示当天的剩余时间

javascript - 无法通过 systemjs 导入 ng-bootstrap

javascript - 如何将对象放入另一个对象 Angular/Javascript

angular - 如何处理 PrimeNG p-fullCalendar 的自定义按钮点击事件?

angular - 将 ng-content 元素的宽度设置为通过的子元素的大小