【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
来源:互联网 发布:从此山高水长君不必知 编辑:程序博客网 时间:2024/05/22 10:49
组件:
在Angular项目中都是有大大小小的组件组成的,那要怎么样才能做到组件之间的通讯呢,以下有几种方法:
- 输入属性:@Input
什么是输入属性:是有父组件发送数据值到子组件里,利用父组件绑定属性到子组件,然后子组件利用在控制器@Input()装饰器来标识这是一个输入变量属性;
父组件:
<p>请输入要传给子组件的值:</p><input type="text" [(ngModel)]="b1"><!-- 在子组件控制器中设置@imput()装饰器来表示要输入的变量;我们需要了解,这是单向的,改变子组件的值不会影响父组件的值--><app-c1 [a]="b1"></app-c1>
父组件控制器:
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})export class HomeComponent implements OnInit { b1: number; constructor() { }}
子组件模板:
<div style="border: 1px solid black;margin: 10px 0px 10px 0px"> <p> 我是一个子组件 </p> <p>这是一个父组件传过来的值:{{a}} 的数据</p></div>
子组件控制器:
import {Component, Input, OnInit} from '@angular/core';@Component({ selector: 'app-c1', templateUrl: './c1.component.html', styleUrls: ['./c1.component.css']})export class C1Component implements OnInit { @Input() a: number; constructor() { } ngOnInit() { }}
- 输出属性:
什么是输出属性:是有子组件向父组件发送数据值,在子组件控制器中使用类型方法:
(EventEmitter)a1: EventEmitter = new EventEmitter();
并且使用 @Output()装饰器来表示 –>
父组件模板:
<h4>输出属性语法:</h4><!--在子组件控制器中使用类型方法:(EventEmitter)a1: EventEmitter<Parin> = new EventEmitter();并且使用 @Output()装饰器来表示 --><!--利用事件绑定来捕获子组件的数据--><app-c2 (a1)="c2Fn1($event)"></app-c2><p>我在父组件获取子组件发射过来的数据:姓名:{{parin.userName}} ,身价:{{parin.maring | number:'2.2-2'}}</p>
父组件控制器:
import { Component, OnInit } from '@angular/core';import {Parin} from "../../components/c2/c2.component";@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})export class HomeComponent implements OnInit { constructor() { } parin: Parin = new Parin('', 0 ); ngOnInit() { } c2Fn1(event: Parin) { this.parin = event; }}
子组件模板:
<div style="border: 1px solid black;margin: 10px 0px 10px 0px"> <p> 我是一个c2子组件 </p> <p> 我是:{{userName}},身价:{{maring | number:'2.2-2'}} </p></div>
子组件控制器:
import {Component, EventEmitter, OnInit, Output} from '@angular/core';@Component({ selector: 'app-c2', templateUrl: './c2.component.html', styleUrls: ['./c2.component.css']})export class C2Component implements OnInit { userName = 'zhangSan'; maring: number; @Output() a1: EventEmitter<Parin> = new EventEmitter(); constructor() { setInterval(() => { const parin: Parin = new Parin(this.userName, 100 * Math.random()); this.maring = parin.maring; this.a1.emit(parin); }, 1000); } ngOnInit() { }}export class Parin { constructor( public userName: string, public maring: number ) {}}
- 中间人模式:
什么是中间人模式:中间人模式是结合了输入和输出属性的利用同一个父级来协同输入输出,当组件不同属一个父级层则可以用另一种方式,服务来进行操作。
父组件模板:
<h4>中间人模式:</h4><!--中间人模式是结合了输入和输出属性的利用同一个父级来协同输入输出,当组件不同属一个父级层则可以用另一种方式,服务来进行操作,--><app-c3 (buy)="buyHome($event)"></app-c3><app-c4 [parin]="parin1"></app-c4>
父组件控制器:
import { Component, OnInit } from '@angular/core';import {Parin} from "../../components/c2/c2.component";@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})export class HomeComponent implements OnInit { constructor() { } parin1: Parin = new Parin('', 0 ); ngOnInit() { } buyHome(event: Parin) { this.parin1 = event; }}
报价组件模板:
<div style="border: 1px solid black;margin: 10px 0px 10px 0px"> <p> 我是一个c3报价子组件 </p> <p> 我是:{{userName}},身价:{{maring | number:'2.2-2'}} </p> <input type="button" value="立即买下" (click)="bytoble($event)"></div>
报价组件控制器:
import {Component, EventEmitter, OnInit, Output} from '@angular/core';@Component({ selector: 'app-c3', templateUrl: './c3.component.html', styleUrls: ['./c3.component.css']})export class C3Component implements OnInit { userName = 'zhangSan'; maring: number; @Output() a1: EventEmitter<Parin> = new EventEmitter(); @Output() buy: EventEmitter<Parin> = new EventEmitter(); constructor() { setInterval(() => { const parin: Parin = new Parin(this.userName, 100 * Math.random()); this.maring = parin.maring; this.a1.emit(parin); }, 1000); } ngOnInit() { } bytoble(event) { this.buy.emit(new Parin(this.userName , this.maring)); }}export class Parin { constructor( public userName: string, public maring: number ) {}}
下单组件模板:
<div style="border: 1px solid black;margin: 10px 0px 10px 0px"> <p> 我是C4下单子组件 </p> <h6>确定购买:</h6> <p>姓名:{{parin.userName}}, 身价:{{parin.maring | number:'2.2-2'}} </p></div>
下单组件控制器:
import {Component, Input, OnInit} from '@angular/core';import {Parin} from "../c3/c3.component";@Component({ selector: 'app-c4', templateUrl: './c4.component.html', styleUrls: ['./c4.component.css']})export class C4Component implements OnInit { @Input() parin: Parin ; constructor() { } ngOnInit() { }}
angular、spring cloud 开源实战项目源码:https://gitee.com/xfdm/FCat
QQ群:549141844代码持续更新…
阅读全文
0 0
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- Angular 2 中的 Output和Input的使用
- 【Angular】@Input和@Output
- 1.5.输入和输出(Input and Output)
- angular4输出属性@Output
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
- 编写input()和output()函数输入,输出5个学生的数据记录
- HTML5新增input输入的list属性的使用
- 输入失调电流(input offset current)和输出失调电压(output offset Voltage)
- Input 标签使用和属性
- Input 标签使用和属性
- ASP中FSO组件的属性和方法(一)-
- input 的一些基本属性使用以及控制图形旋转
- angular4输入属性@input
- (一)@Input属性讨论
- 修改input输入框的type属性
- input输入框的常用属性
- 关于AFNetWorking,NSURLSession的详细使用 以及中间人共计模式
- tcp/ip学习笔记--第21章 Timeout and Retransmission
- nit_241_三角形数
- 使用Jsoup爬虫获取统计局全国地区信息
- 威尔逊定理
- 2.class / string / cctype
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- moho pro 12中文破解版V12.4下载 | 二维动画制作工具 | moho pro 12.4下载
- zookeeper-Leader选举
- MAN异机异目录恢复
- 剑指offer题目java实现
- Glide和Picasso
- VMware之 桥接网络与NAT 网络模式
- java对称加密与非对称加密
- 只通过Vs断点调试安卓Unity游戏