Apprentissage avancé d'Angular : compréhension approfondie du routage et des formulaires-js tutoriel-php.cn

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

	Formule réactive	Modèle entraîné
pour créer un modèle de forme	explicitement, créé dans la classe des composants	implicitement, avec des instructions pour créer
Modèle de données	Structuré et immuable (objet observable)	Non structuré et mutable (liaison bidirectionnelle de données)
Flux de données	Synchrone	Asynchrone
Validation de formulaire	Fonctions	Directives

青灯夜游

Libérer： 2021-12-20 15:29:24

avant

2391 Les gens l'ont consulté

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 ! Apprentissage avancé d'Angular : compréhension approfondie du routage et des formulaires

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

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 &#39;@angular/core&#39;;
// 引入路由模块 RouterModule和 Routes
import { Routes, RouterModule } from &#39;@angular/router&#39;; 
// 引入在不同URL下，需要展示的组件
import { GoodsListComponent } from &#39;./goods-list/goods-list.component&#39;;
import { PersonalCenterComponent } from &#39;./personal-center/personal-center.component&#39;;

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

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

Copier après la connexion

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

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

import { AppRoutingModule } from &#39;./app-routing.module&#39;;

Copier après la connexion

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

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

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

Copier après la connexion

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

路由中两个重要API的介绍

ActivatedRoute

用于

{获取路由信息}

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

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

@Component({
  selector: &#39;app-goods-list&#39;,
  templateUrl: &#39;./goods-list.component.html&#39;,
  styleUrls: [&#39;./goods-list.component.scss&#39;]
})
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);
    });
  }

}

Copier après la connexion

上述两种获取参数方法的区别和使用：
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 &#39;@angular/router&#39;;

Copier après la connexion

🎜🎜 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: &#39;goodsList/:id&#39;, // 定义路由名称
   component: GoodsListComponent, // 指定显示的那个组件
 },
];

Copier après la connexion

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

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

Copier après la connexion

🎜