// 父頁(yè)面
export class SupComponent {
  id: string;
  // 父組件構(gòu)造器
  constructor(private router: Router) {
    // 設(shè)置id
    this.id = 'JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP';
  }
  // 進(jìn)入詳情頁(yè)
  detail(id: string) {
    // 攜帶id跳轉(zhuǎn)至詳細(xì)頁(yè)
    this.router.navigate(['sub', id]);
  }
}

// 子頁(yè)面
export class SubComponent implements OnInit{
  // 子組件構(gòu)造器
  constructor(private activated: ActivatedRoute) { }
  // 子組件初始化鉤子
  ngOnInit(): void {
    // 訂閱活動(dòng)路由
    this.activated.params.subscribe(params => {
      console.info(params['id']);
    });
  }
}

// 修改資料頁(yè)面
export class ModifyUerInfo implements OnInit, DoCheck {
  // 用戶實(shí)體
  user: User;
  // 表單組
  form: FormGroup;
  // 聲明訂閱對(duì)象
  subscript: Subscription;
  // 修改資料頁(yè)構(gòu)造器
  constructor(private builder: FormBuilder) {
    // 實(shí)例化用戶實(shí)體
    this.user = new User();
    // 實(shí)例化訂閱對(duì)象
    this.subscript = new Subscription();
  }
  // 修改資料頁(yè)初始化鉤子
  ngOnInit(): void {
    // 調(diào)用初始化表單函數(shù)
    this.initForm();
  }
  // 修改資料檢測(cè)變動(dòng)鉤子
  ngDoCheck(): void {
    this.subscript = this.form.valueChanges.subscribe(data => {
      // 若表單無(wú)改動(dòng)，data為null
      if (data == null) {
        // 這里要協(xié)同html進(jìn)行不可點(diǎn)擊操作，比較簡(jiǎn)單，就不貼代碼了
        return;
      }
      // 讓提交按鈕可以點(diǎn)擊
      console.info(data);
    })
  }
  // 初始化表單方法
  initForm() {  
    // 初始化表單
    this.form = this.builder.group({
      // 聲明昵稱(chēng)填寫(xiě)項(xiàng)(假裝這里有值)
      nickname: [this.user.username, Validators.required],
      // 聲明年齡填寫(xiě)項(xiàng)(假裝這里有值)
      age: [this.user.age, Validators.required]
    })
  }
}

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