Angular 管道和路由

管道pipe：

要在HTML模板中指定值转换，请使用管道运算符（|）。

{{interpolated_value | pipe_name}}

您可以链接管道，发送一个管道功能的输出以被另一个管道功能转换。管道还可以使用参数来控制其执行转换的方式。例如，您可以将所需的格式传递给date管道。

<!-- Default format: output 'Jun 15, 2015'-->

<p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>

<!-- shortTime format: output '9:43 AM'-->

<p>The time is {{today | date:'shortTime'}}</p>

来自 <https://angular.io/guide/architecture-components#pipes>

添加新的页面：

1. 注册一个Componet并编写相应代码
2. 在app.module.ts中@NgModule的imports中找到RouterModule.forRoot，添加path

   例

   @NgModule({

   imports: [

   BrowserModule,

   ReactiveFormsModule,

   RouterModule.forRoot([

   { path: '', component: ProductListComponent },

   { path: 'products/:productId', component: ProductDetailsComponent },

   ])

   ],

3. 在需要导航的界面添加RouterLink指令链接

   例

   <div *ngFor="let product of products; index as productId">

   <h3>

   <a [title]="product.name + ' details'" [routerLink]="['/products', productId]">

   {{ product.name }}

   </a>

   </h3>

   <!-- . . . -->

   </div>

   the route (URL) 包含一个常量 (/products) and 一个变量productId，会动态地插入当前产品的id

4. 测试链接是否工作正常

More：子页面获取主页面的传值

1. 在子页面的componet.ts文件中导入 ActivatedRoute from the @angular/router package和数据

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

   import { ActivatedRoute } from '@angular/router';

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

2. 在子页面的componet.ts文件的类中定义数据属性，在constructor中注入 ActivatedRoute服务

   export class ProductDetailsComponent implements OnInit {

   product;

   constructor(

   private route: ActivatedRoute,

   ) { }

   }

3. 在子页面的 componet.ts 文件的类中 ngOnInit() 方法中匹配 route 中的 params并用 productId 获得 product.
4. 在子页面的html页面中使用product信息

   <h2>Product Details</h2>

   <div *ngIf="product">

   <h3>{{ product.name }}</h3>

   <h4>{{ product.price | currency }}</h4>

   <p>{{ product.description }}</p>

   </div>

参考自 <https://angular.io/start/routing>