Angular中的routerLink 跳转页面和默认路由
生活随笔
收集整理的這篇文章主要介紹了
Angular中的routerLink 跳转页面和默认路由
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.創(chuàng)建新項(xiàng)目
2.創(chuàng)建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 顯示動(dòng)態(tài)加載的路由
<h1> <a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a> </h1> <router-outlet></router-outlet> <a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a> //匹配不到路由的時(shí)候加載的組件 或者跳轉(zhuǎn)的路由 { path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home' }Angular routerLinkActive 設(shè) 置 routerLink 默認(rèn)選中路由
?
<h1> <a routerLink="/home" routerLinkActive="active">首頁</a> <a routerLink="/news" routerLinkActive="active">新聞</a> </h1>注意將樣式放在全局樣式中
.active{color:red; }?
?
轉(zhuǎn)載于:https://www.cnblogs.com/loaderman/p/10912118.html
總結(jié)
以上是生活随笔為你收集整理的Angular中的routerLink 跳转页面和默认路由的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Validation(2)
- 下一篇: 二叉树前中后、层次遍历