1.建立帶路由配置的項目
ng new router –routing 會自動生成app-routing.module.ts檔案
相關對象介紹:
簡單解釋:
Routes用法:path:‘user’,component:XXXComponent 指定顯示的元件 注意(path不能用/XX,出現路徑問題)
RouterOutlet:插座 使子元件在父模闆中指定位置顯示(html)
RouterLink:在父模闆中通過a标簽指向其他元件(html)
Router:元件中調用navigate()方法改變導航欄中的位址(component)
ActivatedRoute:儲存傳遞路由時的參數資訊和位址
需求:點選按鈕1頁面顯示内容 ‘按鈕1text’點選按鈕2頁面顯示 ‘按鈕2text’
1.建立元件showOne和showTwo
2.在html中設定不同的text以便區分
3.在app-routing.module檔案中設定路徑
const routes: Routes = [
//預設 path:'**'時為預設路由
{path:'',component:ShowOneComponent},
{path:'test',component:ShowTwoComponent}
];
4.app.component.html檔案
//預設路徑 目前路徑為根路徑 若為./表示為子路徑 (在child子路徑中會用到)routerLink可以傳遞路徑和參數
<a [routerLink]="['/']"></a>
<a [routerLink]="['/test']"></a>
<router-outlet></router-outlet>
5.通過Router的negative方法跳轉同樣可以實作此功能
在app.component.html檔案添加個button
6.app.component.ts
constructor(private router:Router){}
showText(){
console.log("rrrrr");
this.router.navigate(['/test']);
}