Aurelia组成元素视图模型，未调用configureRouter

Question

我有一个带有路由的父视图（视图）：

<div class="render-body ${nav.hide === true?'hide':''}">

    <router-view class="router-view flex"></router-view>

    <div class="right-flyout ${rightFlyout.show?'show':''}">

        <i click.delegate="rightFlyoutCloseClick()" class="fa fa-close right-                flyout-close"></i>

        <compose class="add-widget-container flex" view-model="../add-              widget/add-widget"></compose>

    </div><!-- right-flyout -->

</div><!-- render-body -->

父级（视图模型）：

configureRouter(config, router){

    this.router = router;
    config.title = "NexLP Dashboard";
    config.map([
        { route:['', 'insights'], moduleId:'../insights/insights', nav:     true, title: 'insights' },
        { route:'investigate', moduleId:'../investigate/investigate', nav: true, title: 'investigate' },
        { route:'research', moduleId:'../research/research', nav: true, title: 'research' }
    ]);

}//configureRouter()

然后在我的compose元素的视图模型（add-widget模块）中，configureRouter从未被调用，但是它正在加载该模块，因为html正在呈现到页面：

export class AddWidget{

  configureRouter(config, router){
    console.log('in configureRouter in add-widget');
    console.log(router);
    this.router = router;
    router.title = 'add widget';
    config = config;
    config.map([
        { route:['', 'chart'], moduleId:'./chart', nav: true, title: 'chart', name: 'chart' },
        { route:'gecko', moduleId:'./gecko', nav: true, title: 'gecko', name: 'gecko' },
        { route:'list', moduleId:'./list', nav: true, title: 'list', name: 'list' }
    ]);

  }//configureRouter()

  constructor(){

    console.log('add widget ctor');

  }//constructor()
}//class AddWidget

视图：

   <template>

add template

<ul class="add-widget-nav flex">
    <li repeat.for="route of router.navigation">
        ${route.title}
    </li>
</ul>

这两个console.log（）永远不会被调用。 因此，我推测consfigureRouter（）永远不会被调用。 为什么会这样呢？

Answer 1

自定义元素不支持子路由器，仅支持页面。

另外，您在这里滥用了compose元素。 您具有静态确定的视图和视图模型，因此无需使用compose元素。