Angular中的routerLink 跳轉頁面和默認路由

1.創建新項目

2.創建home news newscontent 組件

3.找到app-rounting-moudle.ts配置路由

　　1）引入組件

 import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';

　　2）配置路由

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'newscontent/:id', component: NewscontentComponent},
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
} ];

4. 找到 app.component.html 根組件模板，配置 router-outlet 顯示動態加載的路由

<h1>
<a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a>
</h1>
<router-outlet></router-outlet>

 <a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a>

//匹配不到路由的時候加載的組件 或者跳轉的路由 {
path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home'
}

Angular routerLinkActive 設 置 routerLink 默認選中路由

 

<h1>
<a routerLink="/home" routerLinkActive="active">首頁</a> <a routerLink="/news" routerLinkActive="active">新聞</a>
</h1>

注意將樣式放在全局樣式中

.active{
    color:red;
}