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>
添加新的页面:
- 注册一个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>
Angular 管道和路由的更多相关文章
- ASP.NET Web API WebHost宿主环境中管道、路由
ASP.NET Web API WebHost宿主环境中管道.路由 前言 上篇中说到ASP.NET Web API框架在SelfHost环境中管道.路由的一个形态,本篇就来说明一下在WebHost环境 ...
- ASP.NET Web API Selfhost宿主环境中管道、路由
ASP.NET Web API Selfhost宿主环境中管道.路由 前言 前面的几个篇幅对Web API中的路由和管道进行了简单的介绍并没有详细的去说明一些什么,然而ASP.NET Web API这 ...
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- Angular routing生成路由和路由的跳转
Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...
- Angular学习笔记—路由(转载)
创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...
- Angular 监听路由变化
var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...
- angular管道相关知识
原文地址 https://www.jianshu.com/p/22e0f95bcf24 什么是管道 每个应用开始的时候差不多都是一些简单任务:获取数据.转换它们,然后把它们显示给用户. 获取数据可能简 ...
- angular管道操作符的使用
一.Angular的常用内置管道函数 比如说很多时候我们需要把数字显示成金额.大小写转换.日期小数转换等等. Angular管道对于象这样小型的转换来说是个很方便的选择. 管道是一个简单的函数,它接受 ...
- Angular : 绑定, 参数传递, 路由
如何把jquery导入angular npm install jquery --savenpm install @type/jquery --save-dev "node_modules/z ...
- angular 强制刷新路由,重新加载路由
angular js ui-route 在使用时默认不是不会刷新路由的,所有有些时候我们需要主动刷新路由. 主动刷新方法是: <a ui-sref="profitManage" ...
随机推荐
- Mosquitto安装与部署
版本说明: Mosquitto版本:v2.0.10 libwebsockets版本:v3.0.1(用于支持websockets) mosquitto-go-auth(Mosquitto ...
- Vulnhub 靶场 CORROSION: 2
Vulnhub 靶场 CORROSION: 2 前期准备 下载地址:https://www.vulnhub.com/entry/corrosion-2,745/ 靶机地址:192.168.147.19 ...
- 关于osqp
看了osqp的英文概要,记录如下: 1.采用交替方向乘子法 2.通过因式分解高速缓冲和热启动可以减少运算时间 3.适合嵌入式系统,实测mpc在10ms之内,路径规划在20ms左右(少障碍物),障碍物多 ...
- 吴恩达老师机器学习课程chapter05——评估模型
吴恩达老师机器学习课程chapter05--评估模型 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十章.第十一章. 目录 吴恩 ...
- kubectl的vistor模式
package main import ( "encoding/json" "encoding/xml" "log" ) type Visi ...
- RabbitMQ学习第七章:消息确认机制之事务机制
RabbitMQ消息确认机制之事务机制. RabbitMQ中,我们可以通过持久化数据 解决RabbitMQ服务器异常 的数据丢失问题. 问题:生产者将消息发送出去,消息到底有没有到达RabbitMQ服 ...
- 5. icon创建
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="U ...
- python+requests 验证码登录
1.先创建一个session req = requests.session() 2.通过session来把验证码下载到本地, code = req.get("https://passport ...
- css实现文字多余显示省略号
只显示一行文字 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 显示多行文字 word-break:break-all; ...
- window server 2012R2部署asp.net core项目应用程序池自动停止
当在windows server 2012R2上部署asp.net core项目时,需要安装the Hosting Bundle,但当我们安装完dotnet-hosting后,浏览站点应用程序池会自 ...