Question

我有一个包含输入的哑组件。当用户点击添加按钮时，我将使用文本发送输出。智能组件获取事件并分派到商店。

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

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

Answer 1

一种方法是实现reset-method并直接访问其父组件中的组件：

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>

动作完成后，Ngrx重置表单输入

1 个答案: