我正在设置一个具有多个视口的应用程序。然而,我希望其中一个视口是可选的,即如果在某个路由中没有定义视口,则不应该渲染它。但是,如果我尝试这样做,Aurelia会抛出错误。是否有另一种方法使视口可选?
我正在设置一个具有多个视口的应用程序。然而,我希望其中一个视口是可选的,即如果在某个路由中没有定义视口,则不应该渲染它。但是,如果我尝试这样做,Aurelia会抛出错误。是否有另一种方法使视口可选?
import {noView, inject} from 'aurelia-framework';
@noView
@inject(Element)
export class HiddenViewPort {
constructor(element) {
this.element = element;
}
activate() {
// hide the router-view element
this.element.parentNode.classList.add('aurelia-hide');
}
deactivate() {
// show the router-view element
this.element.parentNode.classList.remove('aurelia-hide');
}
}
import {inlineView} from 'aurelia-templating';
@inlineView('<template></template>')
export class EmptyViewModel {
}
@noView
将具有相同的效果。 - balazska
@noView
装饰器会导致错误,但我可以使用一个空的(inlineView)模板来解决它。我的问题是:注入的元素不是<router-view>
元素的父元素(正如我所期望的那样),而是具有设置为aurelia-app
的元素。因此,在我的情况下,aurelia-hide
被分配给其父级,即<body>
。我在gist.run中重现了这个问题:https://gist.run/?id=54748b3d8043726168a7b76d99a5865e 如果您查看它,aurelia-hide
类被设置在<html>
元素上。 - Daniel