1. 程式人生 > >angular路由的配置以及跳轉

angular路由的配置以及跳轉

one 配置 nbsp nts imp 配置路由 erl angular --

1. 首先創建項目的時候就可以配置路由 cd到你的目錄下 輸入 ng new 項目名稱 --routing 就可以創建項目並配置路由

2. 在app-routing.module.ts 裏面配置路由 列如:

    首先要先引入組件

    import { NewsComponent } from ‘./components/news/news.component‘;

    import { HomeComponent } from ‘./components/home/home.component‘;

    然後配置

    const routes: Routes = [

         { path: ‘home‘, component:HomeComponent },

         { path: ‘news‘, component:NewsComponent }

    ]

默認跳轉路由可以這樣寫 { path: ‘‘, redirectTo: ‘/home‘, pathMatch: ‘full‘ }

3. 路由的跳轉

   <a routerLink ="/home">首頁</a>

   <a routerLink ="/news">新聞</a>

4. routerLinkActive 設置 routerLink 默認選中路由

  <a routerLink ="/home" routerLinkActive=”active”>首頁</a>

  並且可以給他設置樣式

  .active{ color:red; }

  

5. js 跳轉

  首先引入 : import { Router } from ‘@angular/router‘;

  初始化 : constructor( private router: Router ) { }

  js路由的跳轉:this.router.navigate([ ‘/news‘ ]); 或者 this.router.navigate([‘/news‘, hero.id]);

  

angular路由的配置以及跳轉