今天完成的事情
Angular 创建一个默认带路由的项目
1.命令创建项目
ng new angualrdemo08 --skip-install
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'}
];
4. 找到app.component.html 根组件模板，配置router-outlet 显示动态加载的路由
<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
Angular routerLink 跳转页面默认路由
<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>
<h1>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>
动态路由
1.配置动态路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{path: '',redirectTo: '/home',pathMatch: 'full'}
];
2.跳转传值
<a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>
3.获取动态路由的值
import { ActivatedRoute} from '@angular/router';
constructor( private route: ActivatedRoute) {}
ngOnInit() {
console.log(this.route.params);
this.route.params.subscribe(data=>this.id=data.id);
}
动态路由的js 跳转
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]);
路由get 传值js 跳转
1. 引入NavigationExtras
import { Router ,NavigationExtras} 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);
}
今天遇到的问题
对路由之间的跳转还不够熟练，对各种方法的使用还不熟悉，经常忘记
今天的收获
学习了路由的相关知识，知道了angular页面之间是如何跳转的
明天的计划
学习angular自定义模块以及路由的懒加载
返回列表
评论