0

我正在尝试将服务的特定实例传递给 ngx-bootstrap 模式内部的组件。

但是，由于模态不是启动模态的组件的子组件，因此如果我尝试注入它，它将无法解决服务依赖关系。

我可以在打开模态时将服务作为数据传递，然后作为子模态的输入，它可以工作，但这似乎不是正确的方法。

我不想在模块中提供服务 providedIn: 'root' 或提供，因为它包含在组件提供它的生命周期内的持久数据以及使用该数据的功能。

我在打开模式时考虑过传递注入器，但似乎 ngx-bootstrap 不支持该选项。我发现传递自定义注入器的唯一示例是 ng-bootstrap。

如果我无法将注入器传递给模态，则将服务作为数据传递给模态似乎没问题，但我仍然希望能够将其注入基本模态组件的子组件中。

Stackblitz 示例（将服务作为数据传递，然后作为输入传递）：

https://stackblitz.com/edit/ngx-modal-25zz6k?file=src/app/app.component.ts

主要成分：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppService],
})
export class AppComponent {

  modalRef: BsModalRef;
  constructor(private modalService: BsModalService, private appService: AppService, private injector: Injector) {}

  openModal() {
    this.appService.increment();
    this.modalRef = this.modalService.show(SomeComponent,  {
      initialState: {
        title: 'Modal title',
        appService: this.appService,
      },
    });
  }
}

模态组件：

export class SomeComponent implements OnInit {
  appService: AppService;
  title;
  constructor(
    public modalRef: BsModalRef,
  ) {
  }

  ngOnInit() {

  }

}

SomeComponent 的子级：

export class ChildComponent implements OnInit {
  constructor(
    public modalRef: BsModalRef,
  ) { }

  @Input() appService: AppService;

  count: number = 0;

  ngOnInit() {
    this.count = this.appService.num;
  }
}

理想情况下，我希望它以与 ng-bootstrap 类似的方式工作，我可以将自定义注入器传递给类似于：

this.modal.open(SomeComponent, {
  injector: Injector.create([{
    provide: AppService, useValue: this.appService
  }], this.injector)
})

能够将 AppService 添加到 SomeComponent 的注入器也可以，但从我尝试注入它的唯一方法来看，它是在构建组件时执行它，并且在运行 ngOnInit 之前未定义 AppService在某些组件中。

我觉得这样的东西在 SomeComponent 中也可以：

constructor(@Inject(forwardRef(() => returnObservableForAppService)) appServiceObsv: Observable<AppService>) { }

但是注入 Observable 而不是实际的服务似乎与将其作为输入传递差不多。

4

1 回答 1

0

如何使用Injector来创建服务的实例，您可以将其导入到您需要的组件中：

const injector = Injector.create({
  providers: [
    { provide: AppService, deps: [] },
  ]
});

export const appService = injector.get(AppService);

然后在需要的组件中，导入appService并使用：

import { appService } from '....';

// ...

openModal() {
  appService.increment();
  this.modalRef = this.modalService.show(SomeComponent, {
    initialState: {
      title: 'Modal title'
    },
  });
}

导入相同的ChildComponent和...

ngOnInit() {
  this.count = appService.num;
}

你的分叉 STACKBLITZ

于 2019-09-24T08:32:43.203 回答