Angular 고급 학습: 라우팅 및 양식에 대한 심층적인 이해

이 글은 Angular에 대한 고급 연구입니다. Angular의 라우팅 및 양식에 대해 자세히 알아보겠습니다. 모두에게 도움이 되기를 바랍니다.

Angular의 라우팅 소개

단일 페이지 애플리케이션에서는 새 페이지를 얻기 위해 서버로 이동할 필요 없이 서로 다른 정의된 뷰(구성 요소) 사이를 앞뒤로 전환해야 합니다. 한 뷰에서 다른 뷰로 이를 달성하려면 뷰의 navigation을 위해 Angular의 Router를 사용해야 합니다. [관련 튜토리얼 추천: "angular tutorial"]

루트 점프가 필요한 장면:

페이지에 점프 링크가 2개 있는 경우 해당 링크를 클릭하면 제품으로 이동할 수 있기를 바랍니다. 목록 페이지 및 개인 센터 페이지. 먼저

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:

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

라는 두 가지 구성 요소를 만들 수 있습니다. 구체적인 프로세스는 다음과 같습니다.

🎜Routing 생성🎜🎜🎜1 새 파일 app-routing.module.ts를 생성합니다. 리디렉션될 보기 구성을 🎜

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

🎜🎜 내에 배치합니다. Routes 배열에서 경로를 정의합니다(이 배열의 각 경로는 두 개의 속성을 포함하는 JavaScript 개체입니다. 첫 번째 속성 경로가 정의됩니다. URL 경로 두 번째 속성 구성 요소는 해당 경로 아래에 표시되어야 하는 구성 요소를 정의합니다.)🎜🎜2. app.module.ts🎜

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

🎜3에서 AppRoutingModule을 가져옵니다. .html 탐색 표시를 제어하려면🎜

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

🎜

• . 🎜
• 다음으로 b06060c1b765d597eda031c226772d27 태그를 템플릿에 추가하세요. 이 요소는 선택한 경로의 구성 요소로 앱의 보기를 업데이트할 수 있음을 Angular에 알립니다. 사용법은 구성 요소와 동일하며 라우터가 구성 요소를 표시해야 하는 위치를 표시하는 자리 표시자 역할을 합니다. 🎜🎜🎜🎜라우팅의 두 가지 중요한 API 소개🎜🎜

  🎜ActivatedRoute🎜 🎜승리이동도로 이용메시지메시지: 라우팅 매개변수, 정적 데이터 등의 라우팅 정보가 포함되어 있습니다. 구체적인 방법은 ActivatedRoute 공식 웹사이트🎜🎜

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

  🎜🎜매개변수를 얻는 위 두 가지 방법의 차이점과 사용:
  route . snapshot:🎜

  • 주로 초기값을 얻기 위해 매개변수에 직접 액세스해야 합니다. 구독이 필요하지 않은 경우 스냅샷을 사용하세요. 🎜🎜🎜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 },
    ];

    路由嵌套

    애플리케이션이 복잡해지면 루트 구성 요소 외부에 일부 상대 경로를 만들어야 할 수 있으며 이러한 경로는 하위 경로가 됩니다. 즉, 두 번째 경로를 추가해야 합니다. ${43670a8cb4ccf00d64578ad3d769dfbc$, 또 다른 {b06060c1b765d597eda031c226772d27} 이기 때문입니다. < rou

  ter$−$o

위 내용은 Angular 고급 학습: 라우팅 및 양식에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!