アクションが完了した後の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>