// 父頁面
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']);
    });
  }
}

// 修改資料頁面
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) {
        // 這里要協(xié)同html進行不可點擊操作，比較簡單，就不貼代碼了
        return;
      }
      // 讓提交按鈕可以點擊
      console.info(data);
    })
  }
  // 初始化表單方法
  initForm() {  
    // 初始化表單
    this.form = this.builder.group({
      // 聲明昵稱填寫項(假裝這里有值)
      nickname: [this.user.username, Validators.required],
      // 聲明年齡填寫項(假裝這里有值)
      age: [this.user.age, Validators.required]
    })
  }
}

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