angular - 操作完成后 Ngrx 重置表单输入

Question

我有一个包含输入的dumb组件。当用户单击添加按钮时，我将发出带有文本的输出。智能组件获取事件并分派(dispatch)到商店。

操作完成后如何重置输入值？

@Component({
  selector: 'add-post',
  template: "<input #post>
             <button (click)="add.next(post.value)">Add</button>
"
})
export class AddPostComponent {
  @Output() addPost = new EventEmitter();
}

Answer 1

一种方法是实现重置方法并直接访问其父组件中的组件:

export class AddPostComponent {
    @ViewChild()
    post;

    public reset() {
        this.post.value = "";
    }

    // ...rest
}

在父模板中:

<add-post #addPost (addPost)="..."></add-post>

在父组件中:

class ParentComponent {
    @ViewChild()
    addPost: AddPostComponent;

    actionCompleteHandler() {
        this.addPost.reset();
    }

}

---

另一种方法是定义一个虚拟输入:

@Component({
  selector: 'add-post',
  template: "<input #post>
             <button (click)="add.next(post.value)">Add</button>
"
})
export class AddPostComponent {
  @ViewChild()
  post;

  @Input()
  public set reset(value: boolean) {
      if (value === true) {
          this.post.value = "";
      }
  }

  @Output() addPost = new EventEmitter();
}

然后将其与async结合使用:

<add-post [reset]="actionComplete$ | async"></add-post>