How do I inject objects from the DI container in Aurelia-dialog

Question

Using Aurelia, you can put stuff in the container and then inject it. The container state is not shared in the dialog.

Is there a way to get the data I injected in the container, and use it inside the dialog?

Code example

home.js

fetchString(){
  this.data = JSON.parse(stringform);
  this.container.registerInstance('tpscform', this.data);
}

custom-element.js

import {DialogService} from 'aurelia-dialog';
import {LookupFieldsDialog} from './dialog/lookup-fields-dialog';

@inject('tpscform', DialogService)
export class LookupFieldsQuestion {

  constructor(form, dialog){
    console.log(form); // returns the object from the container - works
    //...
  }

  submit() {
    this.dialogService.open({
      viewModel: LookupFieldsDialog,
      model: this.question,
      lock: false
    });
  }

}

lookup-fields-dialog.js

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController, 'tpscform')
export class LookupFieldsDialog {

  constructor(controller, form) {
    this.controller = controller;
    console.log(form); // Returns the string 'tpscform' - doesn't work
  }

  activate(question) {
    this.question = question;
  }

}

I've created an issue for this: https://github.com/aurelia/dialog/issues/286 — Randy, May 02 '17 at 13:18
What if you pass an instance of the view-model? Like `viewModel: new LookupFieldsQuestion(variableFromDI)`? — Fabio, May 02 '17 at 13:22
You could also try to pass a child container in the open method — Fabio, May 02 '17 at 13:23
@FabioLuz Actually, passing the variable to the dialog isn't the problem. The dialog has elements inside of it that go a few levels deep that are using DI to access global elements that I use to keep track of the application state. I might be able to get the data into the dialog, but I don't want to pass that around to thirty other elements that are using dependency injection if they are not inside of a dialog. — Randy, May 02 '17 at 13:27

Randy · Accepted Answer · 2017-05-02T13:52:33.093

1

As @FabioLuz mentioned, you can pass the container into the dialog:

import {Container} from 'aurelia-framework';
import {DialogService} from 'aurelia-dialog';
import {LookupFieldsDialog} from './dialog/lookup-fields-dialog';

@inject(DialogService, Container)
export class LookupFieldsQuestion {

  constructor(dialogService, container) {
    this.container = container;
    this.dialogService = dialogService;
  }

  submit() {
    this.dialogService.open({
      viewModel: LookupFieldsDialog,
      model: this.question,

      // Share current container here
      childContainer: this.container.createChild(),

      lock: false
    });
  }

edited May 02 '17 at 13:52

answered May 02 '17 at 13:37

Randy

9,419
5
39
56

What fi you pass a child container in the open method? Like: `this.dialogService.open({ childContainer: this.container.createChild() })`? – Fabio May 02 '17 at 13:39
@FabioLuz Is there a way to do that? Because that would be a little better / cleaner already – Randy May 02 '17 at 13:40
Inject the `Container` in the custom-element.js, then call `this.dialogService.open({ childContainer: this.container.createChild() })` – Fabio May 02 '17 at 13:42
@FabioLuz That was easy, awesome! Is that default behaviour for plugins like this one? – Randy May 02 '17 at 13:48
Yes. Usually, plugins have the option to pass a child container. Here's where you can find the instructions https://github.com/aurelia/dialog/blob/master/src/dialog-settings.ts#L36 – Fabio May 02 '17 at 13:51

How do I inject objects from the DI container in Aurelia-dialog

Code example

1 Answers1