zoukankan      html  css  js  c++  java
  • angular 输出属性

    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, 100 * Math.random());
          this.count = product.price;
          this.price.emit(product);
        }, 1000);
      }
    
    }
    
    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('', 0);
    
      priceHandler(event: Product) {
        this.price = event;
      }
    }
    <app-order-change (price)="priceHandler($event)"></app-order-change>
    {{price.name}}
    {{price.price | number : '2.1-4'}}
  • 相关阅读:
    Indexed DB入门导学(1)
    移动端touch事件封装
    javascript实现仿微信抢红包
    NODE学习:利用nodeJS去抓网页的信息
    ajax跨域请求无法携带cookie的问题
    四则运算
    wc
    我的问题
    css3新增加的属性
    css知识点回顾(一)
  • 原文地址:https://www.cnblogs.com/chenyishi/p/8932045.html
Copyright © 2011-2022 走看看