本篇文章帶大家來了解Angular中的路由，以及Angular路由的使用。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《angular教學》
ng g component components/home ng g component components/news ng g component components/newscontent
import { HomeComponent } from './components/home/home.component'; import { NewsComponent } from './components/news/news.component'; import { ProductComponent } from './components/product/product.component';
const routes: Routes = [ {path: 'home', component: HomeComponent}, {path: 'news', component: NewsComponent}, {path:'product', component:ProductComponent }, {path: '*', redirectTo: '/home', pathMatch: 'full' } ];
//匹配不到路由的时候加载的组件 或者跳转的路由 { path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home' }
問號傳參的url位址顯示為…/list-item?id=1
{
{ item.name }}
//router為ActivatedRoute的實例
import { Router } from '@angular/router'; . constructor(private router: Router) {} . this.router.navigate(['/newscontent'],{ queryParams:{ name:'laney', id:id }, skipLocationChange: true //可以不写，默认为false,设为true时路由跳转浏览器中的url会保持不变，传入的参数依然有效 });
import { ActivatedRoute } from '@angular/router'; constructor(public route:ActivatedRoute) { } ngOnInit() { this.route.queryParams.subscribe((data)=>{ console.log(data); }) }
{{ item.name }} //js跳转 //router为ActivatedRoute的实例 this.router.navigate([’/list-item’, item.id]);
{path: ‘list-item/:id’, component: ListItemComponent}
this.route.params.subscribe( param => { this.id= param['id']; } )
import { WelcomeComponent } from ‘./components/home/welcome/welcome.component’; import { SettingComponent } from ‘./components/home/setting/setting.component’;
{ path:'home', component:HomeComponent, children:[{ path:'welcome', component:WelcomeComponent },{ path:'setting', component:SettingComponent }, {path: '**', redirectTo: 'welcome'} ] },
以上是詳解Angular中的路由及其用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
