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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • [Unity3D]Unity4全新的动画系统Mecanim

    [Unity3D]Unity4全新的动画系统Mecanim

    2021年12月17日
    89
  • firewall zone_firewalld关闭端口

    firewall zone_firewalld关闭端口自定义zone#添加/删除zonefirewall-cmd–new-zone=mysshzone–permanentfirewall-cmd–delete-zone=mysshzone–permanent#查询所有zone列表firewall-cmd–get-zonesblockdmzdropexternalhomeinternalmysshzonepublictrustedwork#显示生效的zonefirewall-cmd–get-a

    2022年10月6日
    3
  • Dreamweaver8安装方法教程[通俗易懂]

    Dreamweaver8安装方法教程[通俗易懂]打开百度网盘下载http://pan.baidu.com/s/1wIMYi打开下载好的Dreamweaver8,点击下一步选择接受,下一步选择安装路径,点击下一步其它默认勾选的,不

    2022年7月26日
    7
  • ftp扫描软件下载_ftp扫描文件夹连接失败

    ftp扫描软件下载_ftp扫描文件夹连接失败不知道大家用过哪几种ftp扫描工具,是不是感觉都是大同小异的呢?其实市面上的ftp扫描工具功能都是差不多的,当然也还是有一点差别的,那一点的差别可能就是我们选择那一种ftp扫描工具的原因。不论怎么说,也都是要选择自己喜欢的ftp扫描工具来使用。第一款:IIS7服务器管理工具这款工具里面的ftp扫描工具体验感是比较好的,除了一般ftp扫描工具里面都有的批量管理,它还有很多自己设计的功能。可以说这就是它成功的关键。它还能够进行定时上传下载、定时备份和多任务同时进行。哦对,它还有自动更新的功能。IIS7服务

    2022年10月1日
    4
  • es6中padStart和padEnd

    es6中padStart和padEndpadStart和padEnd是es6中新增的语法这两个方法都是字符串原型上的方法,所以只能对字符串使用是新增的方法不会修改原字符串,只有es5才会改变原数据str.padStart(MaxLength,’填充的内容’)//当str的长度没有达到MaxLength,会将第二个参数填充到这个str前直到相当str.padEnd(MaxLength,’填充的内容’)//和上面一样不过是…

    2025年9月16日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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