3

In our project we have bunch of custom elements like this:

<entity-link id="entity.id>

basically it just renders a link to edit entity screen

<template>
    <a class="entity-link"
       route-href="route: ENTITY_EDIT; params.bind: { id: entity.id }"
            >${entity.name}
    </a>
</template>

the problem is that this doesn't work at all within Aurelia Dialog context. href attributed is not populated at all.

I tried to investigate the issue, I injected the router directly to dialog's view-model

import {Router} from 'aurelia-router';
@inject(DialogController, Router)
export default class RecordDetailsDialog {
constructor(dialogController:DialogController, router:Router) {
        this.controller = dialogController;
        this.router = router;     /// WRONG INSTANCE!!!
    }
}

and figured out the wrong instance of Router is being injected. Main router (AppRouter) doesn't define ENTITY_EDIT route, it's added dynamically in child route configureRoute function.

I don't understand why the injected router is the main one instead of the one passed to the view which initiate dialog opening.

Any advice please

Pavel Shabalin
  • 231
  • 2
  • 5

1 Answers1

0

so after 2 hours of reading aurelia's source code I found out that DialogService instance is created within the root DI container which is associated with the root Router which is unaware about children routes. I worked around our problem by registering DialogService instance manually within Child view-model container

  import {Container} from 'aurelia-dependency-injection';
  import {CompositionEngine} from 'aurelia-templating';
  import {DialogService} from 'aurelia-dialog';

  export class Main {

  constructor(container:Container, compositionEngine:CompositionEngine){
    container.registerInstance(DialogService, new DialogService(container,   compositionEngine))`
  }
     ...
  } 

but it feels hacky, still wondering if there is a more clean way to solve the problem.

Pavel Shabalin
  • 231
  • 2
  • 5