美文网首页angular
angular--输入输出属性

angular--输入输出属性

作者: 林ze宏 | 来源:发表于2018-01-07 23:51 被阅读0次

    有父子关系的两个组件:parent、child

    • @Input():输入属性,,在父组件通过属性绑定,传递数据到子组件(父=》子)
    • @Output():输出属性,在父组件通过绑定事件,把子组件中的数据传递到父组件(子=》父)

    输入属性

    child:
    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
    import { Observable } from 'rxjs';
    import { Data } from '@angular/router/src/config';
    @Component({
      selector: 'app-test-demo',
      templateUrl: './test-demo.component.html',
      styleUrls: ['./test-demo.component.css']
    })
    export class TestDemoComponent implements OnInit {
      @Input()
      public stock: string;
    
      @Input()
      public amount: number;
    
      constructor() {
       }
    
      ngOnInit() {
      }
    
    }
    
    界面:
        <p>stock值:{{stock}}</p>
        <p>amount值:{{amount}}</p>
    
    
    parent:在父组件通过属性绑定,把值传递到子组件。
    <app-test-demo [stock]="title" [amount]="100" ></app-test-demo>
    

    输出属性

    child:
    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
    import { Observable } from 'rxjs';
    import { Data } from '@angular/router/src/config';
    @Component({
      selector: 'app-test-demo',
      templateUrl: './test-demo.component.html',
      styleUrls: ['./test-demo.component.css']
    })
    export class TestDemoComponent implements OnInit {
    
      @Output()
      lastPrice: EventEmitter<Myprice> = new EventEmitter(); // EventEmitter需要指定类型
    
      @Output()
      myss: EventEmitter<number> = new EventEmitter();
    
      constructor() {
        setInterval(() => {
         let tt: Myprice = new Myprice("QQ", 100 * Math.random());
         let n: number = tt.price;
    
         this.lastPrice.emit(tt); // 通过EventEmitter 的 emit方法,向父组件传递一个对象
    
         this.myss.emit(n); // 向父组件传递通过值
    
        }, 1000);
       }
    
      ngOnInit() {
      }
    
    }
    
    export class Myprice { // 定义一个对象
      constructor(
        public stock: string,
        public price: number) { }
    }
    
    parent:
    界面: (myss) = "getValNum($event)" 中 方法的参数$event,是从子组件传递过来的值,父组件通过一个方法接收这个值
    <app-test-demo (myss) = "getValNum($event)"></app-test-demo>
    <div>数字:{{n | number:'2.2-2'}}</div>
    
    <app-test-demo (lastPrice) = "getVal($event)"></app-test-demo>
    <div>对象:{{ss.price | number:'2.2-2'}}</div>
    
    ts:
    import { Component } from '@angular/core';
    import * as $ from '_jquery@3.2.1@jquery';
    import { Myprice } from './test-demo/test-demo.component';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      public ss: Myprice = new Myprice("", 0);
      public n: number;
    
      getVal(val: Myprice) {
        this.ss = val;
      }
      getValNum(val: number) {
        this.n = val;
      }
      
    }
    
    
    image.png

    相关文章

      网友评论

        本文标题:angular--输入输出属性

        本文链接:https://www.haomeiwen.com/subject/noqvnxtx.html