Angular4訂閱(Subscribe)與取消

聲明

如下內容僅僅爲我的在自學過程當中的理解，如有錯誤，麻煩您在評論區指出，我將及時更正，方便其餘人，謝謝！

訂閱(Subscribe)

寫過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']);
        });
    }
}

以上描述了一個簡單業務的代碼：在列表頁中點擊一個元素項，而後跳轉進入該元素的詳細頁，並在詳細頁中取到該元素的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]
        })
    }
}

好了，保存代碼後，當我歡喜的去看控制檯結果的時候：

每條紅線，表明我改變了一次表單，請看圖找規律~找你妹！

能夠發現，更改n次表單時，會產生n+1條log，而且是n+1條更改後的表單信息。雖然官方說不須要取消訂閱，可是若是在移動端快速產生那麼多訂閱對象，不免保證必定不會沒有問題出現，而且做爲有理想有追求的程序狗，是沒法忍受這種不完美的狀況出現的。

因而乎在回調函數中，加上了：

TypeScript code

// 取消訂閱
this.subscript.unsubscribe();

這時候，恢復理想狀態，搞定收工！

說真的，規範的代碼不單單可讓代碼的可讀性提升，讓邏輯變得更清楚，讓女神傾慕，讓老闆漲工資… …最重要的是可讓程序避免出可避免的錯誤，不少注意點仍是要注意的。

好了，內容很少，純手打，若是能到你，點個贊吧！