javascript - Aurelia 组成元素 View 模型，未调用 configureRouter

Question

我有一个带路由的父 View ( View ):

<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 -->

父级( View 模型):

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 模块)的 View 模型中，永远不会调用 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() 永远不会被调用。所以我推测 configureRouter() 永远不会被调用。为什么会这样？

Answer 1

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

此外，您在这里滥用了 compose 元素。您有一个静态确定的 View 和 View 模型，因此无需使用 compose 元素。