标签：组件 span cal path 注意 -o dir outer 全局
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; }
标签：组件 span cal path 注意 -o dir outer 全局
原文地址：https://www.cnblogs.com/loaderman/p/10912118.html
