3

我有一个两列布局设置，两列具有非常相似的功能，因此正在重用相同的视图模型。然而，渲染可能会略有不同，具体取决于渲染的哪一侧，所以想知道如何访问视口信息？

考虑这个设置：

应用程序.js

export class App {
    configureRouter(config: RouterConfig, router: Router): void {
        config.map([ {
            route: '',
            name: 'home',
            viewPorts: {
                left: { moduleId: 'module1' },
                right: { moduleId: 'module1' },
            }
        }]);
    }
}

应用程序.html

<template>
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>
</template>

模块1.js

export class Module1 {
    activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
        //which view port am I being rendered in?
    }
}
4

2 回答 2

2

我的解决方案是查找导航指令的视口指令对象并比较它是否是相同的对象实例。我为此创建了一个方便的方法。

导航指令扩展.js

import {NavigationInstruction} from 'aurelia-router';

NavigationInstruction.prototype.viewPortFor = function(viewModelInstance: Object): string {
    for (let key in this.viewPortInstructions) {
        let vpi = this.viewPortInstructions[key];
        if (vpi.component.viewModel === viewModelInstance)
            return key;
    }
    return undefined;
}

模块1.js

import 'navigation-instruction-extension.js';

export class Module1 {
    activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
        instruction.viewPortFor(this); //returns either 'left' or 'right'
    }
}
于 2017-02-13T19:10:42.610 回答
0

我添加了一个新的拉取请求，当新版本发布时，可以通过常规生命周期参数访问视口的名称：

activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
    routeConfig.currentViewPort //the name of current viewport
}
于 2017-05-05T13:15:02.713 回答