Angular配置路由以及動態路由取值傳值跳轉

Angular配置路由

1、找到 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 顯示動態加載的路由

<h1>
    <a routerLink="/home">首頁</a>
    <a routerLink="/news">新聞</a>
</h1>
<router-outlet></router-outlet>

 

Angular routerLinkActive設置routerLink 默認選中路由

<h1>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首頁</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新聞</a>
</h1>

 

 

動態路由傳值與取值

跳轉傳值

<a [routerLink]="[ '/newscontent/',aid]">跳轉到詳情</a>
<a routerLink="/newscontent/{{aid}}">跳轉到詳情</a>

獲取動態路由的值

import { ActivatedRoute} from '@angular/router';

constructor( private route: ActivatedRoute) {
}
public id: Number;
ngOnInit() {
    console.log(this.route.params);
    this.route.params.subscribe(data=>this.id=data.id);
}

 

動態路由的 js 跳轉

import { Router } from '@angular/router

export class HomeComponent implements OnInit {
    constructor(private router: Router) {
    }
        ngOnInit() {
    }
    goNews(){
        // this.router.navigate(['/newscontent', hero.id]);
        this.router.navigate(['/newscontent']);
    }
}