Angular中的routerLink 跳转页面和默认路由

Posted 2021-12-02 loaderman

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;
}