Question

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

我还阅读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');

问题是它在没有更新导航栏的情况下进行转换。这是为什么？我该怎么做才能解决这个问题？

有关评论和第一回答的更新：

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

  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更改时，都需要计算属性来重新计算状态。

据我所知，您的应用程序模板中存在导航栏子组件，并且具有管理应用程序当前登录/注销状态的服务。计算属性和服务注入可以帮助您。

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

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

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

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

1 个答案: