Apprentissage avancé d'Angular : compréhension approfondie du routage et des formulaires

Cet article est une étude avancée de Angular Apprenons-en davantage sur le routage et les formulaires dans Angular. J'espère qu'il sera utile à tout le monde !

Introduction au routage d'Angular

Dans une application monopage, vous devez basculer entre différentes vues (composants) définies sans avoir à vous rendre sur le serveur pour obtenir une nouvelle page. y parvenir, d'une vue à l'autre. Pour la navigation de la vue, vous devez utiliser le Router dans Angular. [Recommandations de tutoriel associées : "Tutoriel angulaire"]

Scènes qui nécessitent des sauts d'itinéraire :

S'il y a deux liens de saut sur la page, nous espérons qu'en cliquant sur ces liens, nous pourrons accéder à Produit page de liste et Page du centre personnel. Nous pouvons d'abord créer deux composants :

GoodsListComponent商品列表页面和个人中心页面。我们可以先创建两个组件分别是 GoodsListComponent 和PersonalCenterComponent。具体流程如下所示：

路由创建

1、新建文件app-routing.module.ts，将要跳转的视图配置放到里边

import { NgModule } from '@angular/core';
// 引入路由模块 RouterModule和 Routes
import { Routes, RouterModule } from '@angular/router'; 
// 引入在不同URL下，需要展示的组件
import { GoodsListComponent } from './goods-list/goods-list.component';
import { PersonalCenterComponent } from './personal-center/personal-center.component';

// 配置的路由数组
const routes: Routes = [
  {
    path: 'goodsList', // 定义路由名称
    component: GoodsListComponent, // 指定显示的那个组件
  },
  {
    path: 'personalCenter', // 定义路由名称
    component: PersonalCenterComponent, // 指定显示的那个组件
  }
];

@NgModule({
   // forRoot() 方法会创建一个 NgModule，其中包含所有指令、给定的路由以及 Router 服务本身。
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

在 Routes 数组中定义你的路由(这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了相对应的路径下需要显示的组件)

2、在app.module.ts中导入AppRoutingModule

import { AppRoutingModule } from './app-routing.module';

3、在app.component.html中把这些路由添加进来，以便控制导航的展示

 <div class="route-change-container">
  <a routerLink="/goodsList">切换到商品列表组件</a> <!--routerLink将你定义的路由连接到模板文件中-->
  <a routerLink="/personalCenter">切换到个人中心组件</a>
</div>

<router-outlet></router-outlet>  <!--此指令通过路由来动态加载组件-->

• 件。
• 接下来，在模板中添加 b06060c1b765d597eda031c226772d27 标签。该元素会通知 Angular，你可以用所选路由的组件更新应用的视图。用法和组件一样，充当占位符，用来标记路由器应该把组件显示到那个位置上。

路由中两个重要API的介绍

ActivatedRoute

用于${获取路由信息}$，它所包含路由的信息比如： 路由参数，静态数据...具体提供的方法可参照ActivatedRoute官网

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; // ① 先引入ActivatedRoute

@Component({
  selector: 'app-goods-list',
  templateUrl: './goods-list.component.html',
  styleUrls: ['./goods-list.component.scss']
})
export class GoodsListComponent implements OnInit {

  constructor(
    private route: ActivatedRoute, // ② 依赖注入这个服务
  ) {}

 // ③ 在初始化的生命周期中去或者url的路由信息
  public ngOnInit(): void {
    // 第一种获取参数的方式
    const params = this.route.snapshot.params;
    
    // 第二种获取参数的方式
    this.route.params.subscribe(params => {
      console.log(params);
    });
  }

}

上述两种获取参数方法的区别和使用：
route.snapshot:

• 需要直接访问参数，主要获取初始值 et
PersonalCenterComponent

. Le processus spécifique est le suivant :

🎜Création de routage🎜🎜🎜1 Créez un nouveau fichier app-routing.module.ts, qui sera redirigé Placez la configuration de la vue à l'intérieur de 🎜

// 使用前，需要在组件中先引入Router这个服务类
import { Router } from '@angular/router';

🎜🎜 Définissez votre route dans le Tableau Routes (chaque route de ce tableau est un objet JavaScript contenant deux propriétés. Le premier chemin de propriété est défini Le chemin URL de l'itinéraire. Le deuxième composant d'attribut définit le composant qui doit être affiché sous le chemin correspondant)🎜🎜2. Importez AppRoutingModule dans app.module.ts🎜

// 需要配置路由
const routes: Routes = [
 {
   path: 'goodsList/:id', // 定义路由名称
   component: GoodsListComponent, // 指定显示的那个组件
 },
];

🎜3. .html pour contrôler l'affichage de la navigation🎜

 <a [routerLink]="[&#39;/goodsList&#39;, id]" routerLinkActive="active-class">切换到商品列表组件</a>
 // 其中/goodsListl是我设置的路由path，id是需要传递的参数   
 // 多个参数的时候，也可以用这种形式，只不过看起来不够直观，所以不推荐多个参数的时候也用这种方法

🎜

• . 🎜
• Ensuite, ajoutez la balise b06060c1b765d597eda031c226772d27 au modèle. Cet élément informe Angular que vous pouvez mettre à jour la vue de votre application avec les composants de l'itinéraire sélectionné. L'utilisation est la même que celle des composants. Il sert d'espace réservé pour marquer la position où le routeur doit afficher le composant. 🎜🎜🎜🎜Introduction à deux API importantes dans le routage🎜🎜

  🎜ActivatedRoute🎜 🎜pour ${Obtenir des informations de routage}$GagnéPrendreRoute ParMessageMessage, qui contient des informations de routage telles que : les paramètres de routage, les données statiques... Pour des méthodes spécifiques, veuillez vous référer à Site officiel d'ActivatedRoute🎜🎜

   <a [routerLink]="[&#39;/personalCenter&#39;]" [queryParams]="{name: &#39;zs&#39;, age: 16}">切换到个人中心组件</a>
   // 参数的格式可以自行组织成各种object

  🎜🎜La différence et l'utilisation des deux méthodes ci-dessus pour obtenir les paramètres :
  route . snapshot :🎜

  • Besoin d'accéder directement aux paramètres, principalement pour obtenir la valeur initiale, utilisez snapshot si aucun abonnement n'est requis 🎜🎜🎜route.params.subscribe():🎜 ;
    • 参数每次变化都要获取到或者需要连续导航多次的时候的用params;

    Router

    是一个${提供导航和操纵URL}$的模块,具体提供的方法可参照Router官网,开发中常用到的方法如下,具体讲解在路由传参中会详细介绍：

    // 使用前，需要在组件中先引入Router这个服务类
    import { Router } from '@angular/router';

    • navigate() 该方法支持的参数类型和routerLink指令一样，所以他们的作用也是一样的;

    • navigateByUrl() 绝对路由；

    • 每次导航前都会调用events方法；(暂时仅了解)

    路由传参以及获取

    路由传参的两种形式

    1. params （是/:id 动态路由）

    使用场景： 比如当我们点击商品列表链接时，希望把用户信息，或者商品种类信息通过url,传到商品列表的组件中去。

    // 需要配置路由
    const routes: Routes = [
     {
       path: 'goodsList/:id', // 定义路由名称
       component: GoodsListComponent, // 指定显示的那个组件
     },
    ];

    2. queryParams（是?id=xx 形式）

    使用场景： 当我们希望通过url传递多个参数的时候，可以选择用这种方式进行路由传参

    1个参数可以优先用动态路由，2个以上还是用query更加方便点

    路由中传参的3种具体方法

    1. routerLink

    单一参数：

     <a [routerLink]="[&#39;/goodsList&#39;, id]" routerLinkActive="active-class">切换到商品列表组件</a>
     // 其中/goodsListl是我设置的路由path，id是需要传递的参数   
     // 多个参数的时候，也可以用这种形式，只不过看起来不够直观，所以不推荐多个参数的时候也用这种方法

    多个参数：

     <a [routerLink]="[&#39;/personalCenter&#39;]" [queryParams]="{name: &#39;zs&#39;, age: 16}">切换到个人中心组件</a>
     // 参数的格式可以自行组织成各种object

    routerLinkActive 跟踪元素上链路路由当前是否处于活动状态。并允许你指定一个或者多个css类，以便在链接路由处于活动状态时添加该元素。

    2. router.navigate

    基于所提供的命令数组和起点路由进行导航。 如果没有指定起点路由，则从根路由开始进行绝对导航

    单一参数：

    public goToGoodsListPage(): void {
        // 第一种方式
        this._router.navigate([`/goodsList/${this.id}`]);
        // 第二种方式 与第一种方式达到相同的效果
        this._router.navigate(['/goodsList', this.id]);
      }
      
    // html中调用这个方法，等同于使用a标签的routerLink属性
    <button (click)="goToGoodsListPage()">切换到商品列表组件</button>

    多个参数：

      public goToPersonalCenterPage(): void {
        this._router.navigate(['/personalCenter'], {queryParams:{name: 'zs', age: 16}});
      }
      
      // html中调用
       <button (click)="goToPersonalCenterPage()">切换到个人中心组件</button>

    3. router.navigateByUrl

    基于所提供的 URL 进行导航，必须使用绝对路径。对于单一参数和多个参数的使用方法与router.navigate一致。

    // 传的第一个参数是数组的形式，而navigate的第一个参数是数组的方式
    // 他的传参目前是拼接在url上边的
      public goToPersonalCenterPage(): void {
        this._router.navigateByUrl(`/personalCenter?name=zs&age=16`);
      }

    在路由中接收参数的2种方式

    1. 接收params类型的参数

    import { ActivatedRoute } from '@angular/router';
    constructor(
        private _route: ActivatedRoute,
      ) {}
      
    public ngOnInit(): void {
        // 第一种只获取初始值方式
        const param = this.route.snapshot.params;
        // 第二种动态获取方式
        this.route.params.subscribe(params => {
          console.log(params);
        });
      }

    2. 接收queryParams类型的参数

    import { ActivatedRoute } from '@angular/router';
    constructor(
        private _route: ActivatedRoute,
      ) {}
      
    public ngOnInit(): void {
        // 第一种只获取初始值方式
        const queryParam = this.route.snapshot.queryParams;
        // 第二种动态获取方式
        this.route.queryParams.subscribe(params => {
          console.log(params);
        });
      }

    路由重定向

    应用场景：当在一个应用中，希望用户默认跳转到某个页面时，就需要使用得到路由重定向。

    重定向的组成：

    • 使用重定向源的path
    • 重定向目标的component
    • pathMatch值来配置路由

    { path: '',
      redirectTo: '/personalCenter',
      pathMatch: 'full' }, // 重定向到 `personalCenter`

    ${pathMatch}$是一个用来${指定路由匹配策略}$的字符串。可选项有 prefix（默认值）和 full。

    prefix: 以指定的路径开头   (就是path中的值与用户输入的的开头路径是一样的，比如path是”abc“，那么用户输入/abc, /abc/a都是可以的，但是输入 /abcd这样就不可以); 如果path是空，那么所有路由都会匹配到这个页面上

    full: 与指定路径完全一样（这个就要求与path要求的路径完全一样，比如说path是‘abc’,那么用户输入/abc ， /abc/是可以的  /abcd，/abc/d是不可以的）;  如果path是空，那么只有localhost:4200后边什么都不加的情况下才匹配到这个页面上。

    路由顺序

    Router在匹配路由的时候，使用的是”${先到先得}$“的策略，所以应当将${具体的静态的路由}$放前边，然后可以放置${默认路由匹配}$的空路径路由，${通配符}$路由是最后一个（他可以匹配所以路由，当其他路由都没有匹配对的时候，Router才会选择他）

    const routes: Routes = [
      // 静态路由
      {
        path: 'goodsList/:id',
        component: GoodsListComponent,
      },
      {
        path: 'personalCenter', 
        component: PersonalCenterComponent,
      },
      // 默认空路径路由
      {
        path: '',
        redirectTo: '/personalCenter',
        pathMatch: 'full'
      },
      // 通配符路由
      { path: '**', component: PageNotFoundComponent },
    ];

    路由嵌套

    Lorsque l'application devient complexe, vous devrez peut-être créer des routes relatives en dehors du composant racine, et ces routes deviennent des sous-routes, ce qui signifie que vous devez en ajouter une seconde ${21472112049d3d34ac82e3ef8d9e4e98$, parce que c'est un autre {b06060c1b765d597eda031c226772d27} < rou

  ter$−$o

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!