遵循Angular公式文档学习理解Angular 2

2 年 ago

宇, 华

2 minutes

首先

我遵循Angular公式文档了解了Angular基本结构，在Angular理解①中。接下来，我将继续按照官方文档进行理解。

Angular 教程

本文按照添加导航的顺序，通过修改和添加示例代码来进行。本文将执行以下操作。

ブラウザの戻るボタンと進むボタンをクリックして、ブラウザの履歴を直感的にナビゲート

将URL路径与组件相关联

1. 添加路由

创建一个新的组件ProductDetailsComponent，用于商品详细信息。在app.module.ts中添加路径和组件。此外，虽然官方文档中没有提到，但也应将ProductDetailsComponent添加到declarations中。

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent }
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

给锚点添加路由链接

使用product.id作为参数，在商品名称中添加链接。RouteLink指令可以通过接收路径数组来动态更改链接（参数也可以包含在数组中传递）。

<div *ngFor="let product of products">
  <h3>
    <a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
      {{ product.name }}
    </a>
  </h3>
...

通过上述修正，可以确认当点击产品名称时会进行页面跳转。

查看商品详情

1. 属性的定义 de

导入 products 数组，并定义 product 属性。

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

import { Product, products } from '../products';

export class ProductDetailsComponent implements OnInit {
  product: Product|undefined;
  /* ... */
}

2. @激活路由

利用 Angular Router，并结合产品数据和路由信息，显示每个商品的详细信息。首先从 @angular/router 中导入 ActivatedRoute，在 constructor() 中注入它。

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

import { Product, products } from '../products';

export class ProductDetailsComponent implements OnInit {
  product: Product|undefined;

  constructor(
    private route: ActivatedRoute,
  ) { }

}

将服务注入组件后，组件就能看到服务。因此，通过注入 ActivatedRoute，组件能轻松获取有关自己路由的信息。（我理解服务注入的好处是能方便地在组件内使用各种功能。对于注入相关的理解还比较浅，如果有错误，请一定指正。）

3. ngOnInit() 方法

在Angular中，存在可以在与组件的创建、更新和销毁相关的生命周期时机上执行的方法。ngOnInit()方法是在组件创建之后被调用的方法。它看起来类似于constructor()方法，但constructor()方法是在组件创建过程中被调用的方法。

在这里，使用route.snapshot.paramMap对象的get()方法获取productId，并使用find()函数从products数组中获取相应的商品。ActivatedRoute的属性可通过参考ActivatedRoute来获取。

ngOnInit() {
  // First get the product id from the current route.
  const routeParams = this.route.snapshot.paramMap;
  const productIdFromRoute = Number(routeParams.get('productId'));

  // Find the product that correspond with the id provided in route.
  this.product = products.find(product => product.id === productIdFromRoute);
}

顺便提一下，我尝试在constructor()中运行ngOnInit()方法的处理逻辑，结果没有问题。具体的使用区别我想不起来，如果您知道，请告诉我。

4. 展示商品的详细信息

使用 *ngIf 判断商品是否存在，如果存在则更新模板以显示商品的名称、价格和描述。

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>

</div>

以下是中文的表达方式：

是通过使用 currency 管道将数字转换为货币字符串。这是用于美元的，所以不需要太过记住。管道可能会经常用到，所以最好记住。

最后

我进行了路由设置。只需要设置链接和相应的组件，然后只需在锚点上添加链接，非常简洁明了。我希望能够继续深入理解Angular。