Question

我有一个组件向其父组件发出一个对象，该组件需要用作该父组件中不同组件的输入。像那句话一样令人困惑，这是我的代码：

在名为project.component.ts的父组件中，以下是我的相关功能：

/**
   *  Set the account to edit
   */
  public accountToEdit: any = {};
  setAccountToEdit(account) {
    this.accountToEdit = account;
  }

在project.component.html：

中

<app-project-accounts
      [projectId]="projectId"
      (accountToEdit)="setAccountToEdit($event)"
      (openCreateAccountModal)="openCreateAccount()"></app-project-accounts>


<!-- New Project Account modal -->
<project-account-create-edit
  [projectId]="projectId"
  [accountToEdit]="accountToEdit"
  (toggleVisibility)="toggleProjectAccountModalVisibility($event)"
  [visible]="projectAccountVisible">
></project-account-create-edit>

现在对于project-accounts.component.ts文件，我有一个按钮，点击后会触发此功能：

/**
   *  Open the modal for updating an account
   */
  openEdit(account) {
    this.openCreateAccountModal.emit(true);
    this.accountToEdit.emit(account);
  }

问题：当我的模态（project-account-create-edit）打开时，它似乎没有传递给它的this.accountToEdit输入，直到模态关闭为止。

这可能是每次输入发生变化时，只有当模态处于关闭状态时才更新模态吗？

我需要做的就是从组件this.accountToEdit的输入中获取project.component.ts的{{1}}变量。

我在这里做错了什么？

提前致谢！

Answer 1

因此，经过多次玩耍后，我需要使用ngOnChanges()让组件查看更改。我添加了这段代码：

ngOnChanges(changes) {

    if(changes.accountToEdit) {
      this.accountToEditChanged = changes.accountToEdit.currentValue;

      console.log('this.account', this.accountToEditChanged);
      if(this.accountToEditChanged.hasOwnProperty('name')) {
        this.isEditing = true;
        this.createAccountForm.controls['name'].setValue(this.accountToEditChanged.name);
        this.createAccountForm.controls['coding'].setValue(this.accountToEditChanged.coding);
      } else {
        this.accountToEditChanged = {};
        this.isEditing = false;
      }

    }
 }

干杯！

Angular 2 - 从需要在另一个组件的输入

1 个答案: