取得路由參數

說明

1. 可以在程式中使用this.activatedRoute取得網址列參數使用
2. 取得參數的方式有兩種：
   1. snapshot
   2. subscribe
3. 不管設定參數時給的是number或string，取得時都是string

snapshot

1. 只能取得執行程式當下的參數值(僅初始值)

程式碼寫法：

this.activatedRoute.snapshot.params['params']

程式碼範例：

1.在c1.component.ts內注入ActivatedRoute，用程式取得參數id與name

export class C1Component implements OnInit {

  id: number = 0;
  name: string = "";

  constructor(private activatedRoute: ActivatedRoute) {
    this.id = +this.activatedRoute.snapshot.params['id'];
    this.name = this.activatedRoute.snapshot.params['name'];
  }

  ngOnInit() {
  }

}

2.變更c1.component.html內html如下

<p>
  c1 works!<br>
  [Matrix]  id={{id}}  name={{name}}
</p>

3.點擊連結來去page-c1與按鈕路由參數(Matrix)測試

subscribe

1. 只能取得執行程式當下的參數值(僅初始值)

程式碼寫法：

this.activatedRoute.params.subscribe(function(){})

程式碼範例：

1.在c2.component.ts內注入ActivatedRoute，用程式取得參數id與name

export class C2Component implements OnInit {

  id: number = 0;
  name: string = "";

  constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((params) => {
      this.id = params['id'];
      this.name = params['name'];
    })
  }

  ngOnInit() {
  }

}

2.變更c2.component.html內html如下

<p>
  c2 works!<br>
  [QueryString]  id={{id}}  name={{name}}
</p>

3.點擊連結來去page-c2與按鈕路由參數(QueryString)測試