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. PL/SQL 训练06--字符串处理

    现在需要做一个任务调度,请大家设计,满足以下需求(1)任务可配置,比如可以配置PKG方法TEST_PROCEDURE(:1,:2...),可以是任意多个入参的方法,也可以没有入参(2)每个方法的实际参 ...

  2. Linux学习笔记 -- 初识 Shell

    Shell 是什么 Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务.Shell既是 ...

  3. 第11章 Tomcat的系统架构与设计模式

    11.1 Tomcat总体设计 11.1.1 Tomcat总体架构 Tomcat和核心有连个组件:Connector和Container,Connector是可以被替换的.一个container可以有 ...

  4. AJAX流程 代码

    var xml =      window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHT ...

  5. MVC原理图解

    注解: 视图中通过Action方法向控制器请求数据 控制器通过view()方法向视图呈现数据

  6. Java面向对象-代码块

    Java面向对象-代码块 代码块主要就是通过{}花括号 括起来的代码: 主要分为 普通代码块 构造块 静态代码块三类.后面学到线程还有一个同步代码块,到时候再说: 普通代码块:仅仅是花括号括起来的代码 ...

  7. Cable master(二分-求可行解)

    Inhabitants of the Wonderland have decided to hold a regional programming contest. The Judging Commi ...

  8. CString,string和char*

    CString是MFC中的 标准C中没有string,有string.h头文件,其中是strcpy,strcmp等函数.但操作对象都是char*类型 string是C++中封装的 转化:LPCSTR  ...

  9. Bypassing iPhone Code Signatures

    [Bypassing iPhone Code Signatures] Starting with the recent beta releases of the iPhoneOS, Apple has ...

  10. java Web jsp四大作用域和九大内置对象

    JSP中的四大作用域:page.request.session.application 这四大作用域,其实就是其九大内置对象中的四个,为什么说他们也是JSP的四大作用域呢?因为这四个对象都能存储数据, ...