ホームページ > 記事 > ウェブフロントエンド > Angular4の定期購入とキャンセルについて詳しく解説

Angular4の定期購入とキャンセルについて詳しく解説

小云云オリジナル: 2018-05-24 14:25:434440ブラウズ

この記事では、Angular4 のサブスクリプション (Subscribe) とキャンセルについて詳しく説明し、サブスクリプションとキャンセルの使用方法を詳しく紹介します。興味のある方は参考にしていただければ幸いです。

Subscribe

js を書いたことがある人なら誰でも、Subscribe がさまざまな場所で見られ、非常に重要な役割を果たすことを知っています。 http リクエストの戻りをリッスンし、ページ間でパラメータを渡します... サブスクリプションといえば Observable について触れずにはいられませんし、Observable について言えば Subscribable について触れずにはいられません... 待て、それは行き過ぎです。トピックに戻りますが、subscribe は Observable クラスの関数です。 Observable の中国語名:「観察可能」から、Observable の役割は監視に似ていることがわかりますが、その監視は多くの場合ページをまたいで行われます。例:

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

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

上の説明単純なビジネスコード: 要素をクリックします。リストページで項目を選択し、要素の詳細ページにジャンプし、詳細ページで要素の ID を取得します。現時点では、イベントのサブスクライブが便利であることがわかります。

Unsubscribe

この時、JAVAでメモリオーバーフローを起こすには、ファイルの読み書き用のストリームを閉じて、サブスクリプションを空にするのが良いのではないかと考えていました。キャンセル？公式ドキュメントには次のような文がありました:

Angular4の定期購入とキャンセルについて詳しく解説

つまり、コンポーネントのフックはサブスクリプションのキャンセルに役立ち、キャンセルする必要はありません。まあ、何を言ってもその通りです。今日 (もちろん今日はブログを書いているときです)、単純な要件に遭遇しました。ユーザーが「ユーザー情報」ページの「情報を変更」ボタンをクリックして、情報を変更するためのフォームページにジャンプするというものです。もちろん、フォームの初期情報はユーザーが情報を変更する前の情報ですので問題ありません。そこで、無駄なリクエストをできるだけ送信しないように（ユーザーはデータを変更せずに送信できるようにする）、前後のデータが異なる場合にそれを判定してボタンをクリックできるようにしてコードを追加しました。 :

// 修改资料页面
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]
    })
  }
}

OK、コードを保存します最後に、コンソールの結果を喜んで見てみました:

Angular4の定期購入とキャンセルについて詳しく解説

各赤い線は、私が一度フォームを変更したことを表していますパターンを見つけるために写真を見てください~あなたの妹を探してください。！

n回フォームを変更するとn+1個のログが生成され、n+1回変更されたフォーム情報であることがわかります。担当者はサブスクリプションをキャンセルする必要はないと言っていますが、これだけ多くのサブスクリプションオブジェクトがモバイル端末上で急速に生成されるのであれば、問題が発生しないのは必然であり、理想と追求を持つプログラマーとして、そのようなことは許容できません。不完全な状況。

そこで、コールバック関数に次のように追加しました:

// 取消订阅
this.subscript.unsubscribe();

Angular4の定期購入とキャンセルについて詳しく解説

この時点で、理想的な状態を復元して、これで終わりです!

正直に言うと、標準化されたコードは、コードの可読性を向上させ、ロジックを明確にし、女神に賞賛され、上司の給料を増やすことができるだけでなく...最も重要なことは、プログラムの不正使用を防止できることです。避けられるミスを防ぐためにも、注意すべき点はまだたくさんあります。

Angular4の定期購入とキャンセルについて詳しく解説

関連記事