Ember application.hbs 模板子组件未重新加载

Question

我正在尝试实现一个导航栏，该导航栏显示 Sign in 或 Sign out，具体取决于我已注入 application 的 Ember 服务中的布尔值] 路线（在 routes/application.js 中定义）。

我也阅读了this，它重申了我选择处理状态的服务方法。

现在的问题是，当我从一个路由重定向到另一个路由时，子组件没有更新。如果 link 显示 Sign in，当我成功验证并登录时，link 仍会显示 Sign in。只有当我刷新页面时，link 文本才会更改为 Sign out。 Sign out link 行为相同。

application.hbs中的代码：

  {{nav-bar isAuthenticated=isAuthenticated}} ==> seems like only loaded once
  {{outlet}}

nav-bar.hbs中的登录和退出代码link:

  {{log isAuthenticated }} ==> only prints upon page load, doesn't print on route changes
  {{#if isAuthenticated}}
    <ul class="nav navbar-nav navbar-right">
      {{#link-to 'logout' tagName="li" class="nav-item"}}<a class="nav-link" href="">Logout</a>{{/link-to}}
    </ul>
  {{else}}
    <ul class="nav navbar-nav navbar-right">
      {{#link-to 'login' tagName="li" class="nav-item"}}<a class="nav-link" href="">Login</a>{{/link-to}}
    </ul>
  {{/if}}

我的登录操作：

  this.transitionTo('dashboard');

问题是它在不更新导航栏的情况下进行转换。这是为什么？我可以运行解决这个问题吗？

关于评论和第一个答案的更新：

如果我没有应用程序控制器怎么办？到目前为止，我的应用程序路由中有这个，但即使我将数据传递到导航栏组件，它仍然没有更新：

  simpleAuthManager: Ember.inject.service(),
  isAuthenticated: Ember.computed('simpleAuthManager', 'simpleAuthManager.user', function() {
    console.log(this.get('simpleAuthManager.user'));
    return this.get('simpleAuthManager').isAuthenticated();
  }),

  setupController(controller, model) {
    this._super(controller, model);
    controller.set('isAuthenticated', this.get('isAuthenticated'));
  }

Answer 1

每次 isAuthenticated 更改时，都需要计算属性来重新计算状态。

据我所知，您的应用程序模板中有一个导航栏子组件，并且有一个服务可以管理您应用程序的当前 logged-in/logged-out 状态。计算属性和服务注入可以在这方面为您提供帮助。

设置一个计算属性来监视您的应用程序控制器中服务的 isAuthenticated 变量（如果没有，请创建一个控制器）。将 isAuthenticated 作为参数传递给导航栏组件。在导航栏组件中也注入服务，并让它在每次单击 log-in/log-out link 时在操作中设置已验证状态。

这样，每次有人登录或注销时，您的服务都会更新，因此您的 isAuthenticated 也会在您的应用程序控制器中计算属性。

您可以阅读 Ember 的计算属性 here。

Ember application.hbs 模板子组件未重新加载

Ember application.hbs template child components not reloading

ember.js

ember-router