2021-01-17

最新推荐文章于 2024-02-18 15:08:08 发布

十谷夫

最新推荐文章于 2024-02-18 15:08:08 发布

阅读量110

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/zzy19920502/article/details/112750350

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写过js的都知道，subscribe在很多地方都能看到它的身影，并且起到了很重要的作用。侦听http请求的返回，页面间传递参数… …说起订阅，就不能不提Observable，说起Observable就不能不提Subscribable… …等等，扯太远了。回到正题，subscribe是Observable类下的一个函数。从Observable的中文名:"可观察的"就能看出，Observable的作用是可以起到类似监听的作用，但它的监听往往都是在跨页面中，举个栗子：

TypeScript code

// 父页面
export class SupComponent {
id: string;
// 父组件构造器
constructor(private router: Router) {
// 设置id
this.id = ‘JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP’;
}
// 进入详情页
detail(id: string) {
// 携带id跳转至详细页
this.router.navigate([‘sub’, id]);
}
}

// 子页面
export class SubComponent implements OnInit{
// 子组件构造器
constructor(private activated: ActivatedRoute) { }
// 子组件初始化钩子
ngOnInit(): void {
// 订阅活动路由
this.activated.params.subscribe(params => {
console.info(params[‘id’]);
});
}
}
TypeScript code

以上描述了一个简单业务的代码：在列表页中点击一个元素项，然后跳转进入该元素的详细页，并在详细页中取到该元素的id。这时候，我们可以看到，订阅事件派上用场了。

###取消订阅(Unsubscribe)
这时候我在想，JAVA里面为了内存溢出，建议我们读写文件的流要关闭，对象要置空，那订阅是否要取消呢？在官方文档上，我们看到一句话：

这里写图片描述

那就是说，组件的钩子会帮我们取消订阅，不需要我们取消。好吧，你说啥就是啥。这天(当然就是我写博客的今天)，我遇到了一个简单的需求：用户在‘用户信息’页面点击‘修改资料’按钮跳转到修改资料的表单页。当然表单的初始信息就是用户未更改信息前的，这个没问题。然后呢，为了尽量少发无用的请求(没改动资料也允许用户提交)，我就在DoCheck钩子里面判断，如果资料前后不相同就让按钮可以点击，上代码：

TypeScript code

// 修改资料页面
export class ModifyUerInfo implements OnInit, DoCheck {
// 用户实体
user: User;
// 表单组
form: FormGroup;
// 声明订阅对象
subscript: Subscription;
// 修改资料页构造器
constructor(private builder: FormBuilder) {
// 实例化用户实体
this.user = new User();
// 实例化订阅对象
this.subscript = new Subscription();
}
// 修改资料页初始化钩子
ngOnInit(): void {
// 调用初始化表单函数
this.initForm();
}
// 修改资料检测变动钩子
ngDoCheck(): void {
this.subscript = this.form.valueChanges.subscribe(data => {
// 若表单无改动，data为null
if (data == null) {
// 这里要协同html进行不可点击操作，比较简单，就不贴代码了
return;
}
// 让提交按钮可以点击
console.info(data);
})
}
// 初始化表单方法
initForm() {
// 初始化表单
this.form = this.builder.group({
// 声明昵称填写项(假装这里有值)
nickname: [this.user.username, Validators.required],
// 声明年龄填写项(假装这里有值)
age: [this.user.age, Validators.required]
})
}
}
TypeScript code