我有一个两列布局设置,两列具有非常相似的功能,因此重复使用了完全相同的视图模型。Hovewer,渲染可能会根据渲染的一侧而略有不同,所以想知道如何访问视口信息?
请考虑此设置:
应用.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?
}
}
我的解决方案是查找导航指令的视口指令对象,并比较它是否是完全相同的对象实例。我为此创建了一个方便的方法。
导航-指令-扩展.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'
}
}
我添加了一个新的拉取请求,当新版本发布时,可以通过常规生命周期参数访问视口的名称:
activate(params: Object, routeConfig: Object, instruction: NavigationInstruction): void {
routeConfig.currentViewPort //the name of current viewport
}