Ngrx在動作完成後重置表單輸入

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

一種方法是實現一個復位方法，直接在其父組件訪問組件：

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>