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']);
    }
}



轉載請說明出處:原文鏈接 http://www.yixcsu.live/qdjs/165

相關閱讀:

安裝npm包應該放在devDependencies還是dependencies

AntDesign Of Angular之響應式柵格尺寸:nzXs、nzSm、nzMd、nzLg、nzXl、nzXXl

Angular響應式表單校驗及提交主動觸發所有校驗

Angular 報錯 Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular Ionic項目build打包后發布到IIS刷新報錯404解決方法

大乐透专家预测 安卓手机捕鱼达人1 黑色沙漠 开工厂赚钱 云顶彩票群 靠技能赚钱五行 兼职赚钱比较快的工作 江西多乐彩 tbc珠宝如何赚钱 一号庄彩票安卓 有什么方法马上赚钱 捷豹彩票网址 梦幻西游上号不用管赚钱 重庆幸运农场 城市猎人赚钱的方法 秒速时时彩 只有赚钱和花钱让我快乐 qq彩票首页