angular input和output

Angular中的输入输出是通过注解@Input和@Output来标识，它位于组件控制器的属性上方。
输入输出针对的对象是父子组件。

@Input和@Output这两个要结合父组件与子组件来说

@Input 是属相绑定，父组件向子组件传递数据

@Output是事件绑定，子组件向父组件传递数据同时触发事件

child.component.html<div>  <p>宠物名称：{{stockName}}</p>  <p>当前价格：{{stockPrice | number:'2.1-2'}}</p></div>复制代码

child.component.ts复制代码

import {Component, OnInit, Input, EventEmitter, Output} from '@angular/core';import {StockInfo} from '../models/stockInfo';
@Component({  selector: 'app-child',  templateUrl: './child.component.html',  styleUrls: [ './child.component.scss' ]})export class ChildComponent implements OnInit {@Input()  stockName: string;  stockPrice: number;@Output()  event: EventEmitter<StockInfo> = new EventEmitter();constructor() {  }ngOnInit() {    setInterval(() => {      const stock: StockInfo = new StockInfo(this.stockName, 100 * Math.random());      this.stockPrice = stock.price;      this.event.emit(stock);    }, 3000);  }}复制代码

stockInfo.ts

export class StockInfo {    constructor(        public name: string,        public price: number    ) {        this.name = name;        this.price = price;    }}复制代码

parent.component.html

<input placeholder="请输入宠物名称" [(ngModel)]="keyWord"><div>  <p>宠物名称：{{keyWord}}</p>  <p>当前价格：{{currentPrice | number:'2.1-2'}}</p></div><hr><app-child [stockName]="keyWord" (event)="eventHandler($event)"></app-child>复制代码

parent.component.ts

import {StockInfo} from '../models/stockInfo';export class ParentComponent implements OnInit {  keyWord: string;  currentPrice: number;  eventHandler(stock: StockInfo) {    this.currentPrice = stock.price;  }}复制代码

转载于:https://juejin.im/post/5c7899c9518825767633d889

angular input和output相关推荐

Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
app.component.html <app-in-out [in]='"传输进入"' (out)="out($event)" ></app ...
Angular应用里的@Input和@Output注解使用方法介绍
这一对注解用于在parent上下文和子指令或者组件之间共享数据.@Input修饰的属性可写,用于数据绑定,而@Output属性可被订阅(Observable). @Input() and @Outpu ...
【Angular】@Input和@Output
该篇是上一篇的改编:[Angular]table假分页 [@Input和@Output] @Input和@Output这两个要结合父组件与子组件来说 @Input:是属相绑定,父组件向子组件传递数据 ...
Angular4学习笔记（六）- Input和Output
概述 Angular中的输入输出是通过注解@Input和@Output来标识,它位于组件控制器的属性上方. 输入输出针对的对象是父子组件. 演示 Input 新建项目connInComponents: ...
标准库 - 输入输出处理(input and output facilities) lua
标准库 - 输入输出处理(input and output facilities) 责任编辑:cynthia作者:来自ITPUB论坛 2008-02-18 文本Tag: Lua [IT168 技术文档 ...
system verilog中的参数传递——ref，input，output
本文介绍了 system verilog 中静态数组.动态数组.队列作为函数参数传递的规则,以及 input.output.ref关键字的规则. system verilog中的参数传递--ref,i ...
IC基础知识（六）SV中default input #1 output #1的解释
目录 1. clocking-endclocking块 2. clocking shew的含义 3. 实例代码 4. clocking event 5. clock cycle延时 '##' 6. d ...
不懂就学——什么是input和output？
在使用机器学习平台过程中,通常我们会把数据集或者上个容器训练的结果,作为模型输入,启动容器,得到模型输出. 那么input和output是什么呢? 在阅读<统计学习方法2>的时候,它应该指 ...
Java IO的原理入门理解，input和output和java程序的关系
Java IO的原理入门理解,input和output和java程序的关系 1.Java IO的原理 2.input和output的理解 3.IO流的分类 4.IO流体系(蓝色为重点.常用) 5.. ...

angular input和output

angular input和output相关推荐

最新文章

热门文章