3-2 路由_路由對象詳解

1. Router

　　app-routing.moudle.ts中配置 Routes

1 const routes: Routes = [
2     {path: '', component: HomeComponent},
3     {path: 'product', component: ProductComponent}
4 ];

　　註意：
　　　　1. path中，不能用 / 開頭。

　　　　2. Routes中放的是路有對象，路由對象可以有多個，每一個路由對象至少包含兩個屬性，

　　　　　　一個屬性為path 即路由的路徑，一個屬性為路由下級的組件。

2. RouterOutlet占位符

　　RouterOutlet占位符存放在模塊的組件模板中，聲明路由配置中配置的組件模板將要放在什麼位置

1 <router-outlet></router-outlet>

3. RouterLink 鏈接

　　一般在a標簽中作為一個屬性用，起到點擊後鏈接頁面的左右

1 <a [routerLink]="['/']">主頁</a>
2 <a [routerLink]="['/product']">商品詳情</a>

　　註意：

　　　　1. 此時裡面的路徑必須使用帶 / 的，表示使用根路由。

　　　　2. 使用RouterLink時註意，參數是一個數組，數組中可以帶有其他信息

　　　　3. Routes + RouterOutlet + RouterLink ：可以組成一個跳轉迴路，完成所需的跳轉。

4. Router 控制器

　　在主模板中：添加按鈕和點擊方式：

1 <input type="button" value="商品詳情input" (click)="toProductDetails()">

　　在控制器中，編寫方法，方法中存放路由地址

1 export class AppComponent {
2     title = 'router';
3     constructor(private router: Router) {
4     }
5     toProductDetails() {
6     this.router.navigate(['/product']);
7     }
8 }

　　其中：

　　　　構造器中可以獲取到路由
　　　　點擊事件中使用路由的navigate()方法可以傳入地址參數。

　　　　Routes + RouterOutlet + Router(控制器中) ：可以組成一個跳轉

5. ActivatedRoute 

　　ActivatedRoute 獲取激活路由對象中攜帶的參數
　　　　1、構造器獲取ActivatedRoute激活路由對象

1 constructor(private routeInfo: ActivatedRoute) { }

　　　　2、初始化數據時獲取參數中的數據

1 ngOnInit() {
2 　　　　this.productId = this.routeInfo.snapshot.queryParams['id'];//從參數中獲取id
3 　　　　this.productId = this.routeInfo.snapshot.params['id']; //從url中獲取id
4 }