Angular-路由跳转

路由配置
1.在根组件app-routing.modules.ts中引用路由组件

import{ HomeComponent} from './home/home.component';
import{NewsComponent} from '.news/news.component';

2.配置路由

const routes:Routes={
{path:'home',component:HomeComponent},
{path:'news',component:NewsComponent},
{
/*设置默认路由*/
paht:'',
redirectTo:'/home',
},
]；

3.找到根组件app.component.html，配置显示动态加载的路由

<h1>
  <a routerLink="/home">首页</a>
  <a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>

通过以上配置就可以实现在跟组件中加载路由了。

动态路由

1.配置动态路由

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},
{paht:'newscontent/:id',component:NewscontentComponent},
{
/*设置默认路由*/
paht:'',
redirectTo:'/home',
},
]；

2.跳转传值

<a [routerLinkj]="['/newscontent/',aid']"跳转到新闻的子页面</a>

或者通过传值进行路由跳转

import{ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){

}
ngOnInit(){
console.log(this.route.params);
this.route.params.subscribe(data=>this.id=data.id);
}

父子路由

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:NewsaddComponet
 }
 ];
}；

3.在父组件中定义router-outlet

<router-outlet></router-outlet>

以上是关于路由配置中经常使用到的路由设置，可供参考。