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

@Component({
selector: 'app-order-change',
templateUrl: './order-change.component.html',
styleUrls: ['./order-change.component.css']
})
export class OrderChangeComponent implements OnInit { name = 'IBM';
count: number;
@Output()
price: EventEmitter<Product> = new EventEmitter(); constructor() { } ngOnInit() {
setInterval(() => {
const product = new Product(this.name, * Math.random());
this.count = product.price;
this.price.emit(product);
}, );
} } export class Product {
constructor(public name: string, public price: number) { }
}
<p>
买{{count | number:'2.1-4'}}手{{name}}产品
</p>
import { Component } from '@angular/core';
import { Product } from './order-change/order-change.component'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { orderName: string;
count: number; price: Product = new Product('', ); priceHandler(event: Product) {
this.price = event;
}
}
<app-order-change (price)="priceHandler($event)"></app-order-change>
{{price.name}}
{{price.price | number : '2.1-4'}}

angular 输出属性的更多相关文章

  1. angular 输入属性@Input , 输出属性@Output , 中间人模式

    1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...

  2. Angular2 组件与模板 -- 输入和输出属性

    Input and Output properties 输入属性是一个带有@Input 装饰器的可设置属性,当它通过属性绑定的形式被绑定时,值会"流入"到这个属性. 输出属性是一个 ...

  3. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  4. angular常用属性大全

    Angular元素属性大全 addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元 ...

  5. 解决引用类型为什么打出的是地址值,又怎么改成输出属性值(toString()底层)

    一丶toString的源码解析: 一丶object的toString的源码解析: 集合中toString源码分析: 小结: 改成输出属性值 在父类中重写toString();方法 快捷键:Alt+In ...

  6. 在checkbox中使用.prop; angular中属性的值使用变量问题

    1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return  false就能阻止点击则改变状态的默认行为 ...

  7. FillConsoleOutputAttribute 函数--指定区域填充控制台输出属性

    FillConsoleOutputAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms682663(v= ...

  8. angular的属性绑定

    1. 图片地址属性绑定 html文件 <img [src]="imgUrl"> ts文件 export class ProductComponent implement ...

  9. angular 输入属性

    import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-order', templa ...

随机推荐

  1. c#编写的基于TCP通信的微风IM 版本3 新年新UI

    电商商模 背景:来源,产生运营模式:模式特点,服务对象,业务开展,赢利点,扩 张点,定价策略行业分析:市场分析:DX,企业,政策,经济,文化,技术 网站架构:频道,版块,功能体系 项目推广:地面推广, ...

  2. python's twenty ninthday for me 模块和包

    模块 和 脚本的 区别:   如果一个py文件被导入了,就是一个模块. 如果这个py文件被直接执行,这个被直接执行的文件就是一个脚本. 模块:1,没有具体的调用过程.2,能对外提供功能. pyc文件: ...

  3. Win7开始菜单所在目录

    C:\ProgramData\Microsoft\Windows\Start Menu\Programs 可在此目录下归类,建文件夹

  4. cxf和axis2使用有感

    CXF框架 个人不喜欢使用wsimport工具: 1.考虑到远端的服务接口发生变化,本地的接口还需要重新同步下 2.项目中无端多了些冗余的代码 这样我们选择cxf的动态调用接口吧,使用DynamicC ...

  5. ubuntu 14.04 安装压缩包版mysql

    既有环境: 1)下载MySQL Community Server 5.6.17 压缩版(mysql-5.6.17-linux-glibc2.5-x86_64.tar.gz) 2)安装目录: /opt/ ...

  6. Splay树分析

    简述 Splay树是一种二叉查找平衡树,其又名伸展树,缘由是对其进行任意操作,树的内部结构都会发生类似伸张的动作,换言之,其读和写操作都会修改树的结构.Splay树拥有和其它二叉查找平衡树一致的读写时 ...

  7. codeforce468DIV2——E. Game with String

    题目 Vasya and Kolya play a game with a string, using the following rules. Initially, Kolya creates a ...

  8. 【bzoj1787】[Ahoi2008]Meet 紧急集合

    1787: [Ahoi2008]Meet 紧急集合 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 2466  Solved: 1117[Submit] ...

  9. mfs监控

    web gui 监控 gui_info.jpg (143.72 KB, 下载次数: 83) gui_most.jpg (209.36 KB, 下载次数: 82) gui_master_info.jpg ...

  10. 高性能的城市定位API接口

    如果不需要精准的定位,还有一种通过IP地址获取当前城市的方法,采用新浪的api接口. <script src="http://int.dpool.sina.com.cn/iplooku ...