如何在 Aurelia 中渲染不同的视图结构？

Question

我的app.html中有一个通用的html结构，以便申请所有页面：

<template>
<require from="header"></require>
<require from="side-bar"></require>
<require from="theme-panel"></require>
<require from="footer"></require>
<!-- BEGIN HEADER -->
<js-header></js-header>
<!-- END HEADER -->

<div class="clearfix"></div>

<!-- BEGIN CONTAINER -->
<div class="container">
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <js-side-bar></js-side-bar>
        <!-- END SIDEBAR -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <!-- BEGIN STYLE CUSTOMIZER(optional) -->
                <js-theme-panel></js-theme-panel>
                <!-- END STYLE CUSTOMIZER -->
                <!-- BEGIN ACTUAL CONTENT -->
                <div class="fade-in-up">
                    <router-view></router-view>
                </div>
                <!-- END ACTUAL CONTENT -->
            </div>
        </div>
    </div>
    <!-- BEGIN FOOTER -->
    <js-footer></js-footer>
    <!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</template>

但是，就我而言，我的登录页面的结构与其他页面完全不同。在我的 app.js 中，我尝试使用 getViewStrategy() 方法来控制我将呈现哪些视图，如下所示：

activate(params, routeConfig, navigationInstruction){
    this.navigationInstruction = navigationInstruction;
    //console.log("params", params); // undefined
    //console.log("routeConfig", routeConfig); // undefined
    //console.log("navigationInstruction", navigationInstruction); // undefined
    //console.log("router", router); //undefined
}
getViewStrategy(){
    if(this.navigationInstruction == 'login'){
        return "app_login.html";
    } else {
        return "app.html";
    }
}

在上面的代码中，'navigationInstruction' 是未定义的。因此，我的解决方案不能很好地工作。有人有其他解决方案吗？非常感谢！

Answer 1

尝试添加 'if' 在部分顶部绑定 select 根据 'canActivate()' 或 'activate()' 过程中设置的视图模型变量设置所需的页面样式每页。

<template>
    <template if.bind = "normalMain">
        ....
    </template>
    <template if.bind = "loginScreen">
        ....
    </template>
</template>

Answer 2

好问题。事实上，当您有同一个单页应用程序的两个完全部分时，正确的做法是创建多个根视图模型或外壳。

首先，通过将 aurelia-app="main" 添加到您的 body 标签，并创建一个名为 main.js 的新初始化文件，为您的应用设置自定义初始化。它应该是这样的。

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // notice that we are setting root to 'login'
  aurelia.start().then(app => app.setRoot('login'));
}

app.setRoot('login') 行告诉 Aurelia 加载一个名为 login.js 的文件作为应用根目录。该文件应该类似于您当前的 app.js。您可以在此文件及其对应的视图中做任何您想做的事情，并且它将与您的主应用程序完全分开。

要导航回您的主应用，您需要调用 app.setRoot('app')，这意味着您需要将 Aurelia 对象注入您的登录视图模型。

import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Login {
  constructor(aurelia) {
    this.aurelia = aurelia;
  }
  goToApp() {
    this.aurelia.setRoot('app');
  }
}

有关更多信息，请在此处查看我的完整文章：Aurelia Login Best Practices

如何在 Aurelia 中渲染不同的视图结构？

How to render different view structures in Aurelia?

javascript

aurelia