Angular 고급 학습: 라우팅 및 양식에 대한 심층적인 이해-JS 튜토리얼-php.cn

	반응 형식	템플릿 구동
폼 모델을 생성하려면 폼 모델을 명시 적으로 생성합니다. 구성 요소 클래스에서 생성되어		데이터 모델을 생성하는 지침
	구조화되고 불변 (관측 가능한 객체)	비구조화 및 변경 가능(데이터 양방향 바인딩)
데이터 흐름	동기화	비동기화
양식 검증	함수	지시어

집

웹 프론트엔드

JS 튜토리얼

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

青灯夜游

Dec 20, 2021 pm 03:27 PM

angular형태라우팅

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

Angular의 라우팅 소개

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

루트 점프가 필요한 장면:페이지에 점프 링크가 2개 있는 경우 해당 링크를 클릭하면 제품으로 이동할 수 있기를 바랍니다. 목록 페이지 및 개인 센터 페이지. 먼저 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 {}

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

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

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

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

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

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

件。

接下来，在模板中添加 <router-outlet></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);
    });
  }

}

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

需要直接访问参数，主要获取初始值 및
PersonalCenterComponent
라는 두 가지 구성 요소를 만들 수 있습니다. 구체적인 프로세스는 다음과 같습니다.

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

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

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

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

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

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

🎜