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

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

我想关闭主视图的导航，所以我尝试设置一个变量（showMenu）来切换可见性。事实上，我可以使用jQuery来实现这一点，但我想知道是否有一种Aurelia方法可以实现这一点。如果我将this.showMenu设置为true，它将显示菜单容器，而false将隐藏它。例如：

app.html

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

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

home.js

  activate() {
    this.showMenu = false;
  }   

  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();
  }       
}

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

编辑

这是可行的，但感觉有点像黑客

home.js

  activate() {
    this.showMenu = false;
  }   

  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();
  }       
}

---

您应该能够使用路由器来实现这一点。由于这只对一个页面是必需的，因此假设您的路由名称为

home

（或者您可以使用在

configureRouter

中设置的其他属性），您可以使用类似的内容：

---

您应该能够使用路由器来实现这一点。由于这只对一个页面是必需的，因此假设您的路由名称为

home

（或者您可以使用在

configureRouter

中设置的其他属性），您可以使用类似的内容：

---

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

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

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

当

aurelia.setRoot（）

默认为app.ts（或.js）时，这一行告诉aurelia启动并设置应用程序的根视图模型

因此，我为我的应用程序创建了一个平台，在那里我可以显示我希望与主应用程序完全分开的页面和样式，包括一个有限的路由器和导航

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负责身份验证和获取适当的令牌。我使用第三方进行身份验证服务，所以我在这个页面上只有一个链接。无论哪种方式，在确认成功的身份验证后，您现在只需要重定向到另一个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（）是用来处理的，也可以用于。shell交换线路
此.router（“authenticatedApp”）对我来说不起作用

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

当然，没有什么可以阻止某人直接链接到
authenticatedApp
，但是在这一点上，如果没有api调用，就不会显示任何数据，而这些api调用都需要提供访问令牌


最终的结果是分离的登录页和应用程序页，它们可以具有不同的样式和不同的导航。注销时，您可以反向执行相同的操作以重新加载验证页。
我使用单独的shell解决此问题。默认情况下，Aurelia将使用app.js（或ts）启动您的应用程序。但是您可以更改默认值，也可以使用相同的命令在身份验证后重定向到新的shell

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

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

当
aurelia.setRoot（）
默认为app.ts（或.js）时，这一行告诉aurelia启动并设置应用程序的根视图模型

因此，我为我的应用程序创建了一个平台，在那里我可以显示我希望与主应用程序完全分开的页面和样式，包括一个有限的路由器和导航

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负责身份验证和获取适当的令牌。我使用第三方进行身份验证服务，所以我在这个页面上只有一个链接。无论哪种方式，在确认成功的身份验证后，您现在只需要重定向到另一个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（）是用来处理的，也可以用于。shell交换线路
此.router（“authenticatedApp”）对我来说不起作用

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

当然，没有什么可以阻止某人直接链接到
authenticatedApp
，但是在这一点上，如果没有api调用，就不会显示任何数据，而这些api调用都需要提供访问令牌


最终的结果是分离的登录页和应用程序页，它们可以具有不同的样式和不同的导航。注销时，您可以反向执行相同的操作以重新加载验证页。
这非常有效。我试图在视图模型中使用if/else做类似的事情。我想我是想得太多了。谢谢你！这很好用。我试图在视图模型中使用if/else做类似的事情。我想我是想得太多了。谢谢你！我喜欢这个答案。我接受了另一个，因为它更适合我的用例，但我可以想象需要这样做