Angular4笔记(二)

最新推荐文章于 2025-06-17 15:32:41 发布

Dan_2017

最新推荐文章于 2025-06-17 15:32:41 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular4 文章标签： Angular4 Route

本文链接：https://blog.youkuaiyun.com/Dan_2017/article/details/78672621

Angular4 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Angular中的路由配置方法，包括基本路由设置、参数传递及路由重定向等核心功能，并提供了具体的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）路由介绍：

1：几个关键词的简介

2：每个关键词应该用到的地方

3：一个简单路由的配置，实现的效果如图

1：先生成两个组件（Home，Product）

2：app-routing.module.ts(这个文件在你创建项目的时候后面加一个参数 -routing 例如：ng new myAngular -routing)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';

//Routes：这里是根路由
const routes: Routes = [
  //path：指路由的路径。component：指路由的目标组件
  { path:'' , component:HomeComponent},
  { path:'product' , component:ProductComponent}, 
  
  //这里配置的是一个页面不存在的路由
  { path:'**' , component:Code404Component},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(){

  }
 }

app.component.html

<a [routerLink]="['/']">主页</a>
<!--  1:用参数来传递商品属性的值。queryParams传递参数id的值为1-->
<!-- <a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a> -->

<!-- 2:用URL来传递商品的属性值 -->
<a [routerLink]="['/product']" >商品详情</a>
<!-- <input  type="button" value="商品详情" (click)="showProducts1()"> -->
<router-outlet></router-outlet>

home.component.html

<p>
  这是HomeComponent!
</p>

product.component.html

<p>
  这是ProductComponent!
</p>

(二)路由传递参数

路由传递参数（1：在查询参数中传递参数 2：在路由路径中传递参数）

1：在查询参数中传递参数

app.component.html 以queryParams传递参数

<--  1:用参数来传递商品属性的值。queryParams传递参数id的值为1-->
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

product.component.ts 用ActivateRoute接收

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@angular/router/src/shared';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private productId:number;
  constructor(private  routeInfo:ActivatedRoute) {
    
   }

  ngOnInit() {
    // 1:接受以路由参数传过来的参数，ActivatedRoute当前激活的路由对象，可以获取路由地址，以及路由参数
    this.productId=this.routeInfo.snapshot.queryParams["id"];
   
  }

}

product.component.html 用差值表达式在页面接收显示

<p>
  商品的id为：{{productId}}
</p>

2：在路由路径中传递参数（主要是传递和接收和上一种方式不一样，其他都一样）

app-routing.module.ts文件修改path

 //2:以URL的方式传商品属性的值
  { path:'product/:id' , component:ProductComponent},

product.component.ts 修改接收用params

 this.productId=this.routeInfo.snapshot.params["id"];

app.component.html

<a [routerLink]="['/product',1]" >商品详情</a>



**************************************************************


参数快照和参数定略（注：当一个路由从自身路由到自身使用参数定略的方式，反之参数快照的方式）

  // 1：参数快照方式。由于OnInit()在组件创建的时候只执行一次，所以第二次获取商品id的时候还是第一次传过来的值
    this.productId=this.routeInfo.snapshot.params["id"];
  //2:参数定略方式（完美的解决了参数快照的问题）。this.routeInfo.params.subscribe会获得一个params的值然后把params["id"]赋值给productId
    this.routeInfo.params.subscribe((params:Params)=>this.productId=params["id"]);

（三）路由重定向
//路由重定向：当''路由过来时先重定向到/home然后在到home
  {path:'',redirectTo:'/home',pathMatch:'full'},
  //path：指路由的路径。component：指路由的目标组件
  { path:'home' , component:HomeComponent},