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

【问题标题】：Ember application.hbs template child components not reloadingEmber application.hbs 模板子组件未重新加载
【发布时间】：2018-06-19 06:55:33
【问题描述】：

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

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

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

application.hbs中的代码：

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

nav-bar.hbs 中登录和退出链接的代码：

  {{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');

问题是它在不更新导航栏的情况下进行转换。这是为什么？我能做些什么来解决这个问题？

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

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

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

【问题讨论】：

您需要在应用程序控制器中创建一个名为isAuthenticated 的计算属性，然后在您登录或注销时使用notifyPropertyChange 对其进行更新，使其始终保持同步。
我认为这行不通。因为您只在应用程序路由上调用setupController 一次。你需要一个控制器。或者更好的是，在导航栏组件中执行此操作。但请记住更新属性，以便更新视图。
太棒了！它工作:) 谢谢

标签： ember.js ember-router

【解决方案1】：

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

据我了解，您的应用程序模板中有一个导航栏子组件，并且有一个服务来管理您的应用程序的当前登录/注销状态。计算属性和服务注入可以在这里为您提供帮助。

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

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

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

【讨论】：