Question

我已经编写了一个带有@Output EventEmitter属性的指令：

@Directive({
    selector: '[ifValid]'
})
export class SubmitValidationDirective {

    @Output('ifValid') valid = new EventEmitter<void>();

    constructor(
        private formRef: NgForm
    ) {}

    @HostListener('click')
    handleClick() {
        this.emitIfValid();
    }

    private emitIfValid() {
        if (this.formRef.valid) {
           this.valid.emit();
        }
    }

}

所以，我这样使用：

<button (ifValid)="save()">

然后，进入我的组件：

private save() {
    this.service.push(this.user, this.toCreate)
       .pipe(
           take(1)
       )
       .subscribe();
}

手动订阅让我很烦。

我希望在ifValid加注时，添加类似于switchMap(() => this.service.push(...))这样的运算符。

我想知道是否可以从html中订阅ifValid。我的意思是，我可以在组件内部订阅ifValid吗？

我希望我解释得很好。

Answer 1

您可以在组件中使用@ViewChield(SubmitValidationDirective) component;，然后再使用

this.component.valid.subscribe(() => {this.service.push(this.user, this.toCreate)
       .pipe(
           take(1)
       )
       .subscribe();
});

但是您将必须unsubscribe()，例如ngOnDestroy

Answer 2

是的，您可以这样做，为此我们需要创建一个服务，并在该服务上声明@Output

SharedService

@Output('ifValid') valid = new EventEmitter<void>();

componentOne

ngOnInit() {
this.sharedService.valid.subscribe(resp => {
     this.save()
});
}

private save() {
    this.service.push(this.user, this.toCreate)
       .pipe(
           take(1)
       )
       .subscribe();
}

指令或组件

import { SharedService } from 'Sharedservice';

@Directive({
    selector: '[ifValid]'
})
export class SubmitValidationDirective {
    constructor(private sharedService: SharedService) { }
    @Output('ifValid') valid = new EventEmitter<void>();

    constructor(
        private formRef: NgForm
    ) {}

    @HostListener('click')
    handleClick() {
        this.emitIfValid();
    }

    private emitIfValid() {
        if (this.formRef.valid) {
          this.sharedService.valid.emit(null);
        }
    }

}

Angular：@Output EventEmitter订阅

2 个答案: