angular路由
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',
pathMatch: 'full'
}
];
4. 找到 app.component.html 根元件模板 ,配置 router-outlet 顯示動態載入的路由
<h1>
<a routerLink="/home">首頁</a> <--點選會替換router-outlet標籤!-->
<a routerLink="/news">新聞</a>
</h1>
<router-outlet></router-outlet> <--可以簡單理解為:頁面的佔位符,動態載入,會被替換掉的。!-->
讓路由可用
引入 RouterModule,即把 RouterModule 新增到 AppModule 的imports 陣列中。
三、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);
}
七 、父子路由
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
<router-outlet></router-outlet>