- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否可以使用@Output
进行回调?
我有一个 FormComponent
检查有效性,并在提交时禁用提交按钮。现在我想在提交完成后重新启用提交按钮。
@Component({
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
...
</form>
`
})
class FormComponent {
form: FormGroup = ...;
isSubmitting = false;
@Output()
submitted = new EventEmitter<MyData>()
onSubmit() {
if(this.form.invalid || this.isSubmitting) {
return;
}
this.isSubmitting = true;
this.submitted.emit(this.form.value);
// Here I'd like to listen for the result of the parent component
// something like this...
// this.submitted.emit(...).subscribe(res => this.isSubmitting = false);
}
}
@Component({
template: `
<my-form (submitted)="onSubmitted($event)"></my-form>
`
})
class ParentComponent {
constructor(private service: MyService) { }
onSubmitted(event: MyData) {
this.service.doSomething(event).pipe(
tap(res => console.log("service res", res)
);
// basically I'd like to `return` this `Observable`,
// so the `FormComponent` can listen for the completion
}
}
我知道,我可以在 FormComponent
中使用 @Input()
并执行如下操作:
@Input()
set submitted(val: boolean) {
this.isSubmitted = val;
}
但我想知道是否有更简单/更好的解决方案,因为isSubmitted
应该是FormComponent
的内部属性,应该由组件自己管理而不是它的 parent 。
最佳答案
onSubmit() {
this.isSubmitting = true;
this.submitHandler(this.form.value).subscribe(res => {
this.isSubmitting = false;
this.cdr.markForCheck();
});
}
在上面的示例代码中,onSubmit()
函数不是无状态函数,它依赖于外部 处理程序。从测试的 Angular 来看,使函数本身不可预测。当这失败时(如果它失败了)你将不知道在哪里、为什么或如何。回调也会在组件被销毁后执行。
被禁用 的问题是组件使用者的外部状态。所以我只想将它作为输入绑定(bind)(就像这里的其他答案一样)。这使组件更干燥并且更易于测试。
@Component({
template: `<form [formGroup]="form" (ngSubmit)="form.valid && enabled && onSubmit()"</form>`
})
class FormComponent {
form: FormGroup = ...;
@Input()
enabled = true;
@Output()
submitted = new EventEmitter<MyData>()
onSubmit() {
// I prefer to do my blocking in the template
this.submitted.emit(this.form.value);
}
}
这里的主要区别是我使用enabled$ |下面的 async
支持 OnPush
变化检测。由于组件的状态会异步更改。
@Component({
template: `<my-form [enabled]="enabled$ | async" (submitted)="onSubmitted($event)"></my-form>`
})
class ParentComponent {
public enabled$: BehaviorSubject<boolean> = new BehaviorSubject(true);
constructor(private service: MyService) { }
onSubmitted(event: MyData) {
this.enabled$.next(false);
this.service.doSomething(event).pipe(
tap(res => this.enabled$.next(true)
).subscribe(res => console.log(res));
}
}
关于带有回调的 Angular @Output,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56627003/
我正在用 C 语言实现一个带有输入和输出重定向的 shell。我可以成功进行输入重定向,但输出重定向不起作用。例如,如果我执行 ls > out.txt,则 out.txt 包含文本“out.txt”
我正在处理创建 AWS API 网关。我正在尝试创建 CloudWatch Log 组并将其命名 API-Gateway-Execution-Logs_${restApiId}/${stageName
我正在修改原作者使用数组构建网页的一些代码: $output[]=$stuff_from_database; $output[]='more stuff'; // etc echo join(
我只想知道它们之间的区别: sort < output 和 sort output 在 Linux 中。它是如何工作的? 最佳答案 这已经在 unix.stackexchange 上讨论过:Perfo
我正在生成外部控制台应用程序并使用异步输出重定向。 as shown in this SO post 我的问题是,在我收到 OutputDataReceived 事件通知之前,生成的进程似乎需要产生一
在 Udemy 上开设类(class)时,我们一直允许使用组件类中的 @Input() 装饰器向组件传递数据。 在阅读 ngBook-2 时,我发现还有另一种方法,即在 @Component 装饰器中
考虑一个 Linux 服务器,它在您的用户的 .bash_profile 中有以下行: echo "Hello world" 因此,每次您通过 ssh 进入它时,您都会看到 Hello world 现
public static void main(String[] args) { String input = new String(JOptionPane.showInputDialog("
我正在使用 MSVS 2008 中的 FFTW3 库对某些数据执行 r2c DFT (n=128)。我已经发现只使用了真实数据 DFT 输出的前半部分……如果我查看我的输出,这似乎是正确的: 0-64
我制作了一个 C 程序,可以从二进制文件中打印出很多值。我相信程序完成它的功能并在它实际显示它吐出的值之前结束。因此,结果我得到了一个可爱的 RUN SUCCESSFUL(总时间:198ms) 突然出
在 hadoop 作业计数器中,“映射输出具体化字节”与“映射输出字节”之间有什么区别?当我禁用映射输出压缩时我没有看到前者所以我猜它是真正的输出字节(压缩)而后者是未压缩的字节? 最佳答案 我认为你
有很多 Stack Overflow 文章与此相关,但没有直接的答案。 这条命令会输出一堆单词 OutputVariable.exe %FILEPATH% 输出: Mary had a little
互联网上的许多文章都使用“标准输入/输出/错误流”术语好像每个术语都与使用的“标准输入/输出/错误设备”术语具有相同的含义在其他文章上。例如,很多文章说标准输出流默认是监视器,但可以重定向到文件、打印
我在 Keras 中使用一些 tensorflow 函数(reduce_sum 和 l2_normalize)在最后一层构建模型时遇到了这个问题。我已经搜索了一个解决方案,但所有这些都与“Keras
我有来自 API 的自定义输出,我想将其格式化为带有一些颜色值的字符串。 最佳答案 输出 channel 可以用 TmLanguage grammar 着色. Output Colorizer扩展扩展
我正在寻找一种方法来查看虚拟机创建过程中发生的情况,因为我使用复杂的集群配置并测试其是否正常工作,我需要能够查看输出,在某些情况下我是不是因为敏感。这与运行remote-exec选项有关 module
当谷歌搜索此错误时没有看到任何相关结果,所以我想发布它。 stack build Building all executables for `gitchapter' once. After a suc
假设module_a里面有register_a,它需要链接到module_b。 register_a 是否应该单独声明并分配给 module_a 的输出: reg register_a; assign
我正在寻找一种方法来查看虚拟机创建过程中发生的情况,因为我使用复杂的集群配置并测试其是否正常工作,我需要能够查看输出,在某些情况下我是不是因为敏感。这与运行remote-exec选项有关 module
输入文件如下 eno::ename::dept::sal 101::emp1::comp1::2800000 201::emp2::comp2::2800000 301::emp3::comp3::3
我是一名优秀的程序员,十分优秀!