Aurelia：从视图中更改 app.js 中的导航

Question

我有一个 Aurelia 项目，在 app.html 和 app.js 中有导航。该项目包含一个具有不同样式的主页，包括与非主页视图不同的导航。

我想关闭主页视图的导航，因此我尝试设置一个变量 (showMenu) 来切换可见性。事实上，我可以使用 jQuery 来做到这一点，但我想知道是否有 Aurelia 的方式来做到这一点。如果我将 this.showMenu 设置为 true，它会显示菜单容器，而 false 会隐藏它。比如这样：

app.html

  <div class="container" if.bind="showMenu">

app.js

  constructor(router){
  this.router = router;
  this.showMenu = true;  
  ...other things
  }

我想做的是从 home.js 将 showMenu 设置为 false。我试过这个（在 20 次左右的其他尝试中），但它不起作用。

home.js

  activate() {
    this.showMenu = false;
  }   

有没有办法通过 $parent 或其他方式使用视图模型在 app.html 中隐藏菜单？

编辑

这可行，但感觉有点像 hack。

home.js

  import {inject} from 'aurelia-framework';
  import {Router} from 'aurelia-router';

  @inject(Router)
  export class Home {

  constructor(router) {

    this.router = router; 

  }

  attached(){
    $("#navbarMenu").hide();
    this.router.refreshNavigation();
  }       
}

Answer 1

您应该能够使用路由器来实现这一点。由于这仅对一页是必需的，因此假设您的路线名称是 home（或者您可以使用您在 configureRouter 中设置的 RouteConfig 的其他属性），您可以拥有类似的东西：

<div class="container" if.bind="router.currentInstruction.config.name !== 'home'">

Answer 2

我通过使用单独的 shell 来解决这个问题。默认情况下，Aurelia 将使用 app.js（或 ts）启动您的应用程序。但是您可以更改该默认设置，并在身份验证后使用相同的命令重定向到新的 shell。

在您的 main.ts（或 .js）中，您将有一行来启动您的 aurelia 应用程序：

aurelia.start().then(() => aurelia.setRoot());

这一行告诉 aurelia 启动并为您的应用设置根视图模型，当 aurelia.setRoot() 没有值时，它默认为 app.ts（或 .js）。

所以我为我的应用创建了一个登陆界面，我可以在其中显示我希望与主应用完全分开的页面和样式，包括有限的路由器和导航。

export function configure(aurelia: Aurelia) {
    aurelia.use
      .standardConfiguration()

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

   aurelia.start().then(() => aurelia.setRoot('authPage'));
}

authPage.ts 是我常用的带有路由器配置的app.ts，但它只配置了 authPage，可能还有一两个其他欢迎页面。

authPage 负责身份验证和获取适当的令牌。我使用第 3 方进行身份验证服务，所以我在此页面上只有一个链接。无论哪种方式，在确认身份验证成功后，您现在只想重定向到另一个 aurelia shell。

@autoinject
export class AuthPage {
private app : Aurelia;
private router : Router;

constructor(router : Router, app: Aurelia) {
   this.app = app;
   this.router = router;
}

authenticate {
  //some kind of authentication procedure...

  if(authenticationSuccess) {
     this.router.navigate('/', { replace: true, trigger: false});
     this.router.reset();
     this.router.("authenticatedApp");
  }
}

this.router.navigate('/', { replace: true, trigger: false}); 和 this.router.reset(); 行用于处理issues mentioned here 以及SO here。没有其他两个，shell 开关行 this.router.("authenticatedApp"); 对我不起作用。

我的authenticatedApp 为用户配置完整的路由器和导航菜单，方式与您通常使用 app.ts 的方式相同，但现在已分离到自己的外壳中。

当然，没有什么可以阻止某人直接链接到 authenticatedApp，但此时没有显示没有 api 调用的数据，所有这些都需要提供访问令牌。

This is a useful link on building an Aurelia app with multiple shells for authentication.

最终结果是分离的登陆页面和应用程序页面可以有不同的样式和不同的导航。在注销时，您可以反向执行相同的操作以重新加载身份验证页面。