1、命令创建项目
ng new demo02 –-routing
2、创建需要的组件
ng g component home
ng g component news
ng g component newscontent
3、找到 app-routing.module.ts 配置路由
引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
配置路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由
首页
新闻
1. 新建组件
ng g component home
ng g component news
ng g component newscontent
2. 新建 app-routing.module.ts ,app-routing.module.ts 中引入模块
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
3. app-routing.module.ts 中引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
3. app-routing.module.ts 中配置组件
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
4. app-routing.module.ts 中配置模块 暴露模块
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
5. 在 app.module.ts 引入刚才定义的路由
import { AppRoutingModule } from './app-routing.module';
6.app.module.ts 里面的 import 注册这个路由模块
imports: [
BrowserModule,
AppRoutingModule
]
7.找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由
首页
新闻
首页
新闻
//刚进来路由为空跳转的路由
{
path:'',
redirectTo:'home',
pathMatch:"full"
}
//匹配不到路由的时候加载的组件 或者跳转的路由
{
path: '**', /*任意的路由*/
// component:HomeComponent
redirectTo:'home'
}
首页
新闻
.active{
color:red;
}
1.配置动态路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
2.获取动态路由的值
import { Router, ActivatedRoute, Params } from '@angular/router';
constructor( private route: ActivatedRoute) {
}
ngOnInit() {
console.log(this.route.params);//
this.route.params.subscribe(data=>this.id=data.id);
}
1. 引入
import { Router } from '@angular/router';
2.初始化
export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}
goNews(){
// this.router.navigate(['/news', hero.id]);
this.router.navigate(['/news']);
}
}
3.路由跳转
this.router.navigate(['/news', hero.id]);
1. 引入 NavigationExtras
import { Router ,NavigationExtras,ActivatedRoute} from '@angular/router';
2.定义一个 goNewsContent 方法执行跳转,用 NavigationExtras 配置传参。
goNewsContent(){
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}
3.获取 get 传值
constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}
1. 创建组件引入组件
import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';
2. 配置路由
{
path: 'news',
component:NewsComponent,
children: [
{
path:'newslist',
component:NewslistComponent
},
{
path:'newsadd',
component:NewsaddComponent
}
]
}
3. 父组件中定义 router-outlet