angular子组件传值给父组件[通俗易懂]

angular子组件传值给父组件[通俗易懂]angular子组件传值给父组件step1: D:\vue\untitled2901\src\app\app.component.tsimport{Component}from’@angular/core’;@Component({selector:’app-root’,template:`Message:{{message}}<app-child(messageEvent)=”receiveMessage($event)”></app

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

angular子组件传值给父组件

step1: D:\vue\untitled2901\src\app\app.component.ts

import { 
   Component} from '@angular/core';

@Component({ 
   
  selector: 'app-root',
  template: ` Message:{ 
    {message}} <app-child (messageEvent)="receiveMessage($event)"></app-child> `,
  styleUrls: ['./app.component.css']
})
export class AppComponent{ 
   

  constructor() { 
   
  }

  message: string;

  receiveMessage($event){ 
   
    this.message =  JSON.parse($event).name;
  }

}

Jetbrains全家桶1年46,售后保障稳定

step2: D:\vue\untitled2901\src\app\child\child.component.ts

import { 
   Component, Output, EventEmitter} from '@angular/core';

@Component({ 
   
  selector: 'app-child',
  template: ` <button (click)="sendMessage()">send Message</button> `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent { 
   


  message = JSON.stringify({ 
   name: 'alice', address: 'beijing',age:17});

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { 
   
  }

  sendMessage() { 
   
    this.messageEvent.emit(this.message)
  }

}

run ,success!!!

end

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/216249.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Layui 弹出层选择实现

    Layui 弹出层选择实现实际Web项目中,下拉框仅能实现数据量少的场景,当我们添加一个商品时,我们总希望在添加选择前能看到产品的规格、图片、参数信息,那么用下拉框就显得力不从心了。本次需求如下:实现过程父层JS<script>layui.use([‘layedit’,’form’,’layer’,’upload’],function(){varform=layui.form,$=layui.jquery,la

  • spring boot vue跨域_vue怎么解决跨域问题

    spring boot vue跨域_vue怎么解决跨域问题一、什么是跨域在springboot+vue前后端分离项目中,请求资源的端口号,域名(ip地址)不同。二、跨域的解决方案1、springboot后端处理:在每个controller上加上@CrossOrigin注解或在controller的基类上添加@CrossOrigin注解,其他controller类加上@Controller即可。2、在vue前端进行处理:通过代理的方式访问后端接口。…

  • TTL232和RS232的区别

    逻辑电平定义不同:TTL232的0是用0v表示。1是用5V表示。RS232的0是用+3V–+15V表示,1是用-3V—15V表示。接口一般都用三根线,1:地线。2:写入。3:导出。他们不可直连,中间需接电平转接板,…

  • Ubuntu18.04显卡驱动及CUDA卸载

    Ubuntu18.04显卡驱动及CUDA卸载背景故事上文提到显卡驱动和CUDA的安装,你们真的因为一切这么流畅么?当然不是,不然我也不会说是“踩坑”之旅了,因为驱动下错了,就搞了半天,这里记录一下如何卸载驱动和CUDA。卸载步骤卸载显卡驱动$sudoapt-get–purgeremovenvidia*$sudoaptautoremove卸载CUDA$sudoapt-get–purgeremove”*cublas*””cuda*”OK完成,可以重装了。ps.此时重启可能导致图形操作界面无法打开。

  • miui12免费网络电话没了_小米9电信卡未注册上volte

    miui12免费网络电话没了_小米9电信卡未注册上volteMinaMEIDActivator是由Minacriss开发的新工具。可以激活所有MEID三网的信号恢复,并且支持打电话、短信、4G流量上网。支持iPhone5sX直接所有型号,支持iOS12.5.2iOS14.4.2。MEID三网指:不小心忘记ID密码,而且已经刷机并且是激活锁界面的现在也可解信号。更新日志:2021.5.111,修复错误2,自动屏蔽系统更新、还原手机功能。使用方法:1,对设备进行越狱,使用checkra1n越狱或者U盘越狱工具2,找正规授权经销商对设备序列号进行授权3

  • [bzoj3884] 上帝与集合的正确用法

    [bzoj3884] 上帝与集合的正确用法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号