Question

Hy，我实际上是aurelia的新手，所以我开始使用这些教程，两者都运行良好。正如它在联系经理的最后提到的那样，进一步增加新联系人的可能性，我试一试，但它并没有成功。在网络上搜索工作或最佳实践解决方案并不成功，所以我很乐意提供任何帮助和帮助。

我做的第一步是添加路由器以便添加联系人＆＃39;在 app.ts

{route: 'addcontact', moduleId: 'add-contact', name: 'addcontact'}

我的理念是，能够选择＆＃34;添加联系人＆＃34;在底部的 contact-list.html 中，下一步是添加更多的列表元素。这里遇到的问题是，如何让实际的路由器知道用户是否选择了这个用于将其标记为活动的路由器。我试过这个solution，但它没有奏效。因此我只是添加了这个列表元素：

<li class="list-group-item">
    <a route-href="route: addcontact; params.bind: {}">
        <h4 class="list-group-item-heading">Add contact</h4>
    </a>
</li>

我在这里第一次尝试，没有params.bind，因为我没有任何参数，所以它只是route-href =＆＃34; route：addcontact＆＃34;但这没有用，所以我使用空的参数（我知道这不是一个很好的解决方案，但它对我有用）。

下一步当然是添加 add-contact.ts 和 add-contact.html 。对于模板，我只是简单地公开了 contact-details.html ，因为添加新联系人的表单应该看起来一样。作为一个补充问题，如何在不同的组件中使用模板，我是否需要添加两次，因为名称需要不同，还是有其他选择？

最后我认为必要的最后一步是编写 add-contact.ts 文件。以下是此文件的工作版本：

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
import {WebAPI} from './web-api';
import {ContactUpdated,ContactViewed} from './messages';
import {areEqual} from './utility';

interface Contact {
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
}

@inject(WebAPI)
export class AddContact {
  routeConfig;
  contact: Contact;

  constructor(private api: WebAPI) { }

  activate(params, routeConfig) {
    this.routeConfig = routeConfig;
    this.routeConfig.navModel.setTitle('new contact');
  }

  //get canSave() { 
  //  return this.contact.firstName && this.contact.lastName 
  //          && !this.api.isRequesting; 
  //}

  save() {
    this.api.saveContact(this.contact).then(contact => {
      this.contact = <Contact>contact;
      this.routeConfig.navModel.setTitle(this.contact.firstName);
    });
  }
}

嗯，你看，我需要取消注释canSave（）方法，因为this.contact尚未初始化，我尝试设置this.contact = null或字段＆＃39; firstname＆＃39; ，＆＃39;姓氏＆＃39;等等null没有工作。因此，知道是否可能保存的测试在初始化时失败了。

我在github上搜索了这个完美任务的最终代码，当然还在互联网上。但我在某处找不到最佳实践，甚至找不到合适的解决方案。

任何帮助，我做错了以及解决这个问题的最佳做法，我提前感谢

更新1 在Fabio Luz的帮助下，我能够保存联系人。（这是改变）

get canSave() { 
    if (!this.contact) { 
        return false; 
      } 
    return this.contact.firstName && this.contact.lastName 
            && !this.api.isRequesting; 
}

知道新联系人已保存，我需要刷新contact-list.ts组件中的联系人，但实际上我在add-contact.ts组件中。如何在 save 方法中告知更新/刷新联系人列表并同时选择新联系人。为此，我在contact-list.ts组件中添加了一个 updateContactList 方法：

updateContactList() {
    this.api.getContactList().then(contacts => this.contacts = contacts);
}

我在add-contact组件中导入了联系人列表。在保存方法中，我改为：

save() {
  this.api.saveContact(this.contact).then(contact => {
    this.contact = <Contact>contact;
    this.routeConfig.navModel.setTitle(this.contact.firstName);
    this.contactList.updateContactList();
    this.ea.publish(new ContactUpdated(this.contact));
  });
}

但这并没有任何效果。那么如何更新另一个组件中的另一个组件呢？

更新2

也许最好链接到tutorial我目前正在努力使这些辅助步骤正常工作，因此您可以查看额外使用的代码。

Aurelia Contact-Manager添加新联系人

0 个答案: