Javascript 余烬：更新父零部件属性会导致完全重新加载

我试图在单击此子组件中的链接后，从子组件更新父组件的属性。但这会导致意外的完整页面重新加载

我正在编写组件。我从父组件向子组件提供可用的属性和（clousure操作）

当我硬编码父组件的“key”属性时，一切似乎都正常工作。但当我从子组件修改它时，它会进行完全重新加载，将属性重置为其默认值，因此不会进行过滤

所有属性都作为级联相互链接

这是我的代码：

Parent-Component.js

import Ember from 'ember';
import moment from 'moment';

const { Component, computed, inject } = Ember;

export default Component.extend({

  calculateDates: inject.service(),

  key: 'week',
  dateOne: computed('key', function(){
    return this.get('calculateDates').getFirstDayOf(this.get('key'));
  }),
  dateTwo: computed('key', function(){
    return this.get('calculateDates').getLastDayOf(this.get('key'));
  }),
  filteredModel: computed('dateOne', 'dateTwo', function() {
    const modelToFilter = this.get('model');
    return modelToFilter.filter((item) => {
      const itemDate = item.get("date");
      return itemDate >= dateOne && itemDate <= dateTwo;
    });
  }),
  arrayForChildComponent: computed('dateOne', 'dateTwo', function() {
    const formatedDates = [
      moment(new Date()).format('YYYY-MM-DD'),
      moment(this.get('dateOne')).format('YYYY-MM-DD'),
      moment(this.get('dateTwo')).format('YYYY-MM-DD')
   ];
    const routeTitle = ['Today', 'Week', 'Month'];
    const routes = [];
    for (var i=0; i < formatedDates.length; i++) {
      let queryParams = formatedDates[i];
      if (routeTitle[i]=='Week') queryParams = `${formatedDates[i]}-to-${formatedDates[i + 1]}`;
      if (routeTitle[i]=='Month') queryParams = moment(new Date()).format('MMMM');
      routes.push(
        { route : 'authenticated.meetings.list',
          name : routeTitle[i],
          queryParams : queryParams });
    }
    return routes;
  }),
  actions: {
    setFilterKey(value) {
      this.set('key', value.toLowerCase());
    }
  }
});

路线视图模板

{{#Parent-Component model=model as |filter| }}
  {{#filter.header}}
    {{filter.nav}}
  {{/filter.header}}
  {{filter.groups}}
{{/Parent-Component}}

子组件模板（filter.nav）

{{{#每个数组作为|路由}的childComponent

{{#链接到route.route（查询参数date=route.queryParams）class=aClass}
{{route.name}
{{/链接到}

{{/每个}}

我试图完成的是，将键设置为它有标签的名称

• 我还尝试使用（action（mut key）route.name）从父组件导入密钥
• 还尝试从父组件导入操作，并在子组件中使用它
• 最后，它不是利弗雷罗德。我禁用了它

一切都具有相同的效果，它们从父组件更改密钥，更新过滤器，并重新加载页面

非常令人沮丧

有什么想法吗

提前感谢。：）

更新 根据嵌套链接的事件传播，我取出了事件处理程序onClick。现在它可以工作了，属性被正确更新，但是嵌套链接设置的queryParameters在第二次单击之前不会反映在URL中。在第二次单击之前，“活动”类都不会出现

{{#each arrayForChildComponent as |route|}}
    <li class={{liClass}} {{action onListItemClick route.name}}>
      {{#link-to route.route (query-params date=route.queryParams) class=aClass}}
        {{route.name}}
      {{/link-to}}
    </li>
{{/each}}

{{{#每个数组作为|路由}的childComponent

{{#链接到route.route（查询参数date=route.queryParams）class=aClass}
{{route.name}
{{/链接到}

{{/每个}}

指向的

链接捕获点击，并在操作收到点击之前将您发送到另一页。指向

的

链接捕获点击，并在操作收到点击之前将您发送到另一页。
{{#each arrayForChildComponent as |route|}}
    <li class={{liClass}} onClick={{action onListItemClick route.name}}>
      {{#link-to route.route (query-params date=route.queryParams) class=aClass}}
        {{route.name}}
      {{/link-to}}
    </li>
{{/each}}

{{#each arrayForChildComponent as |route|}}
    <li class={{liClass}} {{action onListItemClick route.name}}>
      {{#link-to route.route (query-params date=route.queryParams) class=aClass}}
        {{route.name}}
      {{/link-to}}
    </li>
{{/each}}