管道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>
添加新的页面:
- 注册一个Componet并编写相应代码
-
在app.module.ts中@NgModule的imports中找到RouterModule.forRoot,添加path
例
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'products/:productId', component: ProductDetailsComponent },
])
],
-
在需要导航的界面添加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
- 测试链接是否工作正常
More:子页面获取主页面的传值
-
在子页面的componet.ts文件中导入 ActivatedRoute from the @angular/router package和数据
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { products } from '../products';
-
在子页面的componet.ts文件的类中定义数据属性,在constructor中注入 ActivatedRoute服务
export class ProductDetailsComponent implements OnInit {
product;
constructor(
private route: ActivatedRoute,
) { }
}
- 在子页面的 componet.ts 文件的类中 ngOnInit() 方法中匹配 route 中的 params并用 productId 获得 product.
-
在子页面的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>