首页 > 其他分享 >angular组件间的数据输出——output

angular组件间的数据输出——output

时间:2024-11-07 14:47:03浏览次数:3  
标签:sum number EventEmitter score 组件 output angular change

原文链接:angular组件间的数据输出——output – 每天进步一点点

0.背景

上一篇文章,我们简单介绍的是Input的用法,这篇文章,我们继续介绍一下Output的用法。

需要注意的是是Output表示子组件向父组件传递数据。图示如下:

在本文中:StudentComponent 是子组件,AppComponent 是父组件。父组件引用子组件。

上一篇文章中,已经显示的数据如下:

简单需求:我们在子组件中计算语文、数学、英语成绩总成绩的方法,calSum,

我们执行子组件的方法后,此方法携带值到父组件的appMethod方法,然后将这个值渲染到父组件的页面上。

1.定义子组件

TS:

import { Component, Input, Output,OnInit, EventEmitter } from '@angular/core';   @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'] }) export class StudentComponent implements OnInit { @Input() name:string //学生姓名 @Input() age:number //学生年龄 //成绩 @Input() score:{ chinese:number //语文成绩 math:number //数学成绩 english:number //英语成绩 }   @Output() change: EventEmitter<number> = new EventEmitter<number>(); //change表示被调用时的名称,EventEmitter<number> 中的number表示传递的类型是数字类型     sum:number=0; //学生的总成绩 constructor() { }   ngOnInit() { } //计算总成绩 calSum(){ console.log("我是student组件的calSum方法") this.sum=Number(this.score.chinese)+Number(this.score.math)+Number(this.score.english) console.log("我计算出的总成绩是",this.sum) this.change.emit(this.sum); //把计算后的值传递给父级 }   }

HTML:

<div> <h1>学生姓名:{{name}}</h1> <h2>学生年龄:{{age}}</h2> <h2>语文成绩:{{score.chinese}}</h2> <h2>数学成绩:{{score.math}}</h2> <h2>英语成绩:{{score.english}}</h2>   </div> <button (click)="calSum()">计算总成绩</button>

在TS中,有几段比较关键的代码:

@Output() change: EventEmitter<number> = new EventEmitter<number>();

这个表示子组件传递消息的事件,其中number表示传递的类型, 还支持string等其他类型。change是方法名,当在父组件显示子组件要用到此方法名。

this.change.emit(this.sum);

这行代码表示传递具体数据,它是由子组件中calSum方法进行触发的。也就是,当我点击子组件的这个按钮时,子组件携带计算好的值来到父组件中,由父组件进一步处理。

2.父组件

TS:

import { Component } from '@angular/core';   @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'myapp'; myName='张三' myAge=14 myScore={ myChinese:12, myMath:143, myEnglish:34, } totalSum=0;   appMethod(sum:number){ console.log("我是父级组件,从子级组件传递过来的sum=",sum) this.totalSum=sum }   }

HTML:

 

<app-student [name]="myName" [age]="myAge" [score]="{ chinese:myScore.myChinese, math:myScore.myMath, english:myScore.myEnglish }" (change)="appMethod($event)" ></app-student>   <div> 总成绩:{{totalSum}} </div>   <router-outlet></router-outlet>

需要说明的是:

(change)="appMethod($event)"

change是我们子组件中定义的,而appMethod指向的是父组件中方法,我们用这个方法来接收参数。

效果:

 

标签:sum,number,EventEmitter,score,组件,output,angular,change
From: https://www.cnblogs.com/longkui-site/p/18532241

相关文章

  • angular—如何制作一个HTTP拦截器
    原文链接:angular—如何制作一个HTTP拦截器–每天进步一点点HTTP拦截器在开发过程中十分常见。在构建项目时,最好就直接创建一个HTTP拦截器,否则遇到以下几种问题,再进行改动就会十分浪费时间。需要给所有的请求修改请求地址。需要给所有的请求参数设置新的请求报文首部。需要监......
  • angular组件间的数据输入——input
    原文链接:angular组件间的数据输入——input–每天进步一点点0.背景我们前面一篇文章简单介绍了angular如何引用其他组件,这篇文章简单介绍一下angualr组件之间如何传输数据。一个使用场景:我们定义了一个学生组件,学生有自己的姓名、年龄,语文成绩、数学成绩、英语成绩,然后其他......
  • angularJs 之 ng-options 的用法:
     angularjs之ng-optionng-options一般有以下用法:对于数组:labelforvalueinarrayselectaslabelforvalueinarraylabelgroupbygroupforvalueinarraylabeldisablewhendisableforvalueinarraylabelgroupbygroupforvalueinarraytrackbytrackexp......
  • Web组件和WebView 习题答案 <HarmonyOS第一课>
    一、判断题1. Web组件提供具有网页显示能力,@ohos.web.webview提供web控制能力。正确(True)错误(False)回答正确A2. 同一页面的多个Web组件,必须绑定不同的WebviewController。正确(True)错误(False)回答正确A二、单选题1. 下列关于Web组件的属性,描述错误的是?A.......
  • 『玩转Streamlit』--文本与标题组件
    本篇准备开始介绍Streamlit的组件。Streamlit的组件非常多,后续几篇打算按照用途的分类,介绍每个分类中最常用的组件。本次从最简单的组件开始,介绍文本和标题相关的组件,也就是以下4个组件:st.text:用于显示普通的文本内容st.title:用于显示页面的大标题st.header:用于显示一级标题......
  • Avalonia封装实现指定组件允许拖动的工具类
    创建Avalonia的MVVM项目,命名DragDemo,然后将项目的Nuget包更新到预览版 12345678<ItemGroup>        <PackageReferenceInclude="Avalonia"Version="11.0.0-preview5"/>        <PackageReferenceInclude="Avalonia.Desktop&qu......
  • [vant] 最新版使用vw布局+vant组件库兼容方案
    1.安装vw插件npmipostcss-px-to-viewport-8-plugin--save-dev2.配置vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite';importComponen......
  • 高阶组件怎么实现?
    高阶组件(Higher-OrderComponent,HOC)是一种在React中用于重用组件逻辑的模式。它本质上是一个接收一个组件作为参数,并返回一个新的包装组件的函数。以下是一个示例代码,演示了如何实现一个简单的高阶组件:jsximportReactfrom"react";//定义一个高阶组件函数constwithB......
  • 前端自学(5)-使用Vue组件库element书写前端代码
    element是饿了么团队研发的,一套为开发者,设计师和产品经理提供的基于Vue2.0的桌面端组件库。官网:Element-网站快速成型工具有了element组件库,开发人员就可以通过CV(复制粘贴。)制作出精美的前端页面。下面是一个简单页面的示例,我将为大家演示如何制作一个这样的页面。1.首......
  • KbdHebL3.dll文件丢失危机?解决KbdHebL3.dll缺失问题:希伯来语键盘布局组件恢复全攻略
    在使用计算机时,有时可能会遇到KbdHebL3.dll文件丢失的问题。KbdHebL3.dll是一个与希伯来语键盘布局相关的动态链接库(DLL)文件,它负责处理希伯来语键盘布局和输入法转换的代码。一旦该文件丢失,将会导致希伯来语键盘布局无法正常使用。以下是一份详细的恢复全攻略,帮助用户解决KbdHe......