HiDocs
Search K

Appearance

1.路由配置 ​

注意：首先我们需要在创建项目的时候选择需要路由

找到 app-routing.module.ts 配置路由 ——> 相当于vue中的route.config.ts文件

1.引入组件

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

注意：虽然我们在app.module.ts里面配置了需要使用的组件，但是我们在这个路由配置文件里面还是需要引入这些组件才行！

2.配置路由

ts
const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'news', component: NewsComponent },
    { path: 'newscontent/:id', component: NewscontentComponent },
    { 
      path: '',
      redirectTo: '/home', //设置默认跳转的路径（这样首次进入就会进入home了，不用管app组件，不像vue-router里面一样还需要配置/的路径为app组件！）
      pathMatch: 'full'
    }
];

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

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

2.路由跳转routerLink ​

跳转页面 默认路由

html
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>

或者写为：也是可以的

html
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>

配置404路由

ts
//匹配不到路由的时候加载的组件 或者跳转的路由
{
    path: '**', /*任意的路由*/
    // component:HomeComponent
    redirectTo:'home'
}

//或者：
{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
}

3.设置routerLink的选中样式 ​

routerLinkActive 设置 routerLink 默认选中路由

html
<h1>
    <a routerLink="/home" routerLinkActive="active">首页</a>
    <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
css
.active{
	color:red;
}

4.路由传值 ​

1.get传值的方式（查询参数） ​

注意：这样不需要在router配置文件里面配置

1.跳转传值

html
<a [routerLink]="['/newscontent/']" [queryParams]="{aid:key}">
    跳转到详情，把索引id传过去
</a>

3.获取get传的值，使用ActivatedRoute类

js
import { ActivatedRoute } from '@angular/router';
constructor( private route: ActivatedRoute) { }
ngOnInit() {
    console.log(this.route.queryParams);
    this.route.queryParams.subscribe(data=>this.id=data.id);
}

2.动态路由的方式（路径参数） ​

注意：这样需要在router配置文件里面配置

1.配置动态路由

js
const routes: Routes = [
    {  path: 'home', component: HomeComponent  },
    {  path: 'news', component: NewsComponent  },
    {  path: 'newscontent/:id', component: NewscontentComponent  },
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];

2.跳转传值

两种写法：

html
<a [routerLink]="[ '/newscontent/',aid]">跳转到详情，把索引id传过去</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>

3.获取动态路由的值，使用ActivatedRoute类

js
import { ActivatedRoute } from '@angular/router';
constructor( private route: ActivatedRoute) { }
ngOnInit() {
    console.log(this.route.params);
    this.route.params.subscribe(data=>this.id=data.id);
}

3.get传值的js跳转 ​

注意：这样不需要在router配置文件里面配置

1.引入

js
import { Router } from '@angular/router';

2.初始化：引入Router和NavigationExtras

js
import { Router, NavigationExtras} from '@angular/router';
export class HomeComponent implements OnInit {
    constructor(private router: Router) {
    }
    ngOnInit() {
    }
    goNewsContent(){
        let navigationExtras: NavigationExtras = {
            queryParams: { 'session_id': '123' }, //get传值的数据
            fragment: 'anchor' //这个可以不加
        };
        this.router.navigate(['/news'],navigationExtras);
    }
}

3.路由跳转

js
this.router.navigate(['/news'],navigationExtras); //参数是写在[]外面

4.获取get传值js跳转的值，使用ActivatedRoute类

js
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
	console.log(this.route.queryParams);
}

4.动态路由或者普通路由的js跳转 ​

注意：这样不需要在router配置文件里面配置

1.引入

js
import { Router } from '@angular/router';

2.初始化

js
export class HomeComponent implements OnInit {
    constructor(private router: Router) {
    }
    ngOnInit() {
    }
    goNews(){
        // this.router.navigate(['/news', hero.id]); //传id过去 //动态路由
        this.router.navigate(['/news']); //普通路由
    }
}

3.路由跳转

js
this.router.navigate(['/news', hero.id]); //参数是写在[]里面

4.获取动态路由js跳转的值，使用ActivatedRoute类

js
constructor(private route: ActivatedRoute) {
	console.log(this.route.params);
}

5.history传值 ​

注意：以上四种方式的传值都会把值直接暴露在路径里面，这种方式是不会的！！！

如果你想在 JavaScript 代码中进行路由跳转时传递参数，可以使用 NavigationExtras 对象。这允许你在编程方式进行路由导航时传递参数。

以下是如何在 JavaScript 代码中进行路由跳转并传递参数：

  1. 导入相关模块

首先，确保你导入了 Angular 的 Router 和 NavigationExtras。

ts
import { Router, NavigationExtras } from '@angular/router';
  1. 创建 NavigationExtras

使用 NavigationExtras 对象创建你要传递的参数。

ts
const navigationExtras: NavigationExtras = {
  state: { //类似get传值，但是这里定义的是state，而不是queryParams
    someData: 'This is the data you want to pass'
  }
};
  1. 使用 Router 导航

使用 Router 导航到目标路由，并传递 NavigationExtras 对象。

ts
constructor(private router: Router) {}

navigateToExample() {
  this.router.navigate(['/example'], navigationExtras);
}
  1. 在目标组件中获取参数

在目标组件中使用 ActivatedRoute 服务来获取传递的参数。

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

constructor(private route: ActivatedRoute) {
  const someData = history.state.someData; //通过history获取值！
  console.log('Received data:', someData);
}

在这种方式下，参数会以状态的形式传递，不会出现在 URL 中。但需要注意，该方式要求 Angular 版本为 7.2.0 及以上。如果你的版本低于此要求，可以考虑使用查询参数的方式传递数据。

5.父子路由 ​

1.创建组件引入组件

js
import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';

2.配置路由

ts
{
    path: 'news',
    component:NewsComponent,
    children: [
        {
            path:'newslist',
            component:NewslistComponent
        },
        {
            path:'newsadd',
            component:NewsaddComponent
        },
        {  //配置默认跳转，这样就可以默认跳转到NewslistComponent
            path:'**',
            redirectTo:'newslist'
        }
    ]
}

3.父组件中定义 router-outlet

html
<router-outlet></router-outlet>

6.跳转指定级数路由 ​

1. 跳转到上一级路由（不是历史路由） ​

ts
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateBack() {
  this.router.navigate(['../'], { relativeTo: this.route }); // 导航到上一级路由
}

2. 跳转到下一级路由 ​

ts
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateForward() {
  this.router.navigate(['next'], { relativeTo: this.route }); // 导航到下一级路由
}

7.跳转到历史路由 ​

在 Angular 中，你可以使用 Location 服务来实现跳转到历史路由（导航到前一个或后一个路由）。

1. 跳转到前一个路由 ​

ts
import { Location } from '@angular/common';

constructor(private location: Location) {}

navigateToPrevious() {
  this.location.back();
}

location.back() 方法会导航到前一个历史路由。

2. 跳转到后一个路由 ​

ts
import { Location } from '@angular/common';

constructor(private location: Location) {}

navigateToNext() {
  this.location.forward();
}

location.forward() 方法会导航到后一个历史路由。

这些方法利用了浏览器的历史记录，让你可以在历史路由中前进或后退。请确保你导入了 Location 服务并在构造函数中进行了注入。