Правильный способ передачи конкретного экземпляра сервиса модальному с помощью ngx-bootstrap - PullRequest
Новая
       54

Правильный способ передачи конкретного экземпляра сервиса модальному с помощью ngx-bootstrap

0 голосов
/ 24 сентября 2019

Я пытаюсь передать конкретный экземпляр Сервиса компонентам, которые находятся внутри модала ngx-bootstrap.

Однако, поскольку модал не является потомком компонента, который запускаетмодал не может разрешить зависимость службы, если я пытаюсь внедрить ее.

Я могу передать службу как данные при открытии модала, а затем как вход для дочернего модала этого, и это работает, ноэто не похоже на правильный способ сделать это.

Я не хочу, чтобы служба предоставлялась в виде: 'root' или предоставлялась в модуле, поскольку она содержит постоянные данные в течение срока службы компонента, предоставляющего его.а также наличие функций, использующих эти данные.

Я смотрел на прохождение инжектора при открытии модального режима, но кажется, что ngx-bootstrap не поддерживает эту опцию.Единственный пример прохождения пользовательского инжектора, который я нашел, был для ng-bootstrap.

Передача Сервиса в качестве данных модальному, кажется нормальным, если я не могу передать инжектор модальному, но я все еще хотел бычтобы иметь возможность внедрять его в дочерние элементы базового модального компонента.

Пример Stackblitz (передача службы в качестве данных, а затем в качестве ввода):

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

Mainкомпонент: 

@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() {

  }

}

Дочерний элемент некоторого компонента: 

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

  @Input() appService: AppService;

  count: number = 0;

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

В идеале мне бы хотелось, чтобы он работал аналогично нг-bootstrap делает это, когда я могу передать пользовательский инжектор модальному, подобному следующему: 

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

Возможность добавить AppService к инжектору SomeComponent также будет хорошей, но из того, что я пробовал, есть только способыВнедрить его можно будет во время создания компонента, а AppService не будет определен, пока в SomeComponent не будет запущен ngOnInit.

Мне кажется, что что-то подобное будет работать и в некоторыхКомпонент: 

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

Но внедрение Observable вместо фактического сервиса выглядит примерно так же, как просто передача его в качестве ввода.

1 Ответ

0 голосов
/ 24 сентября 2019

Как насчет использования 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

...