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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • WPF 布局控件 之 WrapPanel[通俗易懂]

    WPF 布局控件 之 WrapPanel[通俗易懂]StatickPanel就是将子元素按照堆栈的形式一一排列,通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。纵向的StatickPanel默认每个元素宽度与面板一样宽,反之横向亦然。如果包含的元素超过了面板空间,它只会截断多出的内容。元素的Margin属性用于使元素之间

    2022年7月23日
    9
  • java wsdl asmx 替换_WebService asmx生成的wsdl 修改 location

    java wsdl asmx 替换_WebService asmx生成的wsdl 修改 locationC#中使用webservice接口的时候,返给服务器的IP地址是带上了端口号的。但是有时候不能要那个端口(比如用nginx做了转发),就需要在服务端处理一下(处理内容就是后面的代码)。此外,需要在配置文件中web.config中的system.web中添加一些东西:2.如果没有protocols中的内容的话,有可能post和get请求不能被正确识别(未做过验证,只是在博客园上看见过类似问题)。代码…

    2022年5月29日
    74
  • 关于G1收集器

    关于G1收集器G1(GarbageFirst)收集器是Oracle公司开发的一款主要面向服务端的拥有相对可靠的停顿预测模型的垃圾收集器。在垃圾收集器的历史上有着里程碑式的意义。与之前的收集器不同,G1不在基于固定的新生代与老年代的内存分配方式进行垃圾清理,而是使用了基于Region的内存分配的方式进行垃圾清理。这种方式使得G1在进行垃圾清理的时候不需要对整个新生代或老年代甚至整个Java堆进行垃圾清理,这样就极大的减少标记期间的停顿时间。设计思路:面向局部(单个或多个Region)收集内存布局:基于Regi

    2022年5月20日
    33
  • Python框架区别是什么?比较常用的框架有哪些?

    Python框架区别是什么?比较常用的框架有哪些?前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。众所周知,Python开发框架大大减少了开发者不必要的重复劳动,提高了项目开发效率的同时,还使得创建的程序更加稳定。目前比较主流的Python框架都有哪些呢?一般大家用的比较多的是Django、Flask、Scrapy、Diesel、Cubes、Pulsar和Tornado。那么这些Python框架的区别是什么呢?下面我们一起来看看这些Python框架的不同适用环境。.

    2022年5月31日
    31
  • Extjs grid设置单元格字体颜色,及单元格背景色

    Extjs grid设置单元格字体颜色,及单元格背景色转自:http://blog.csdn.net/suixufeng/article/details/7480170上面这种是最简单的,设定固定的某单元格中字体颜色。[javascript]viewplaincopy//————————————————–列头    var cm = new

    2022年7月11日
    88
  • DatagramSocket类简单使用

    DatagramSocket类简单使用importorg.junit.Test;importjava.io.*;importjava.net.DatagramPacket;importjava.net.DatagramSocket;importjava.net.InetSocketAddress;/***@author*@date2019/7/23*/publicclassTestUd…

    2022年6月7日
    44

发表回复

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

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