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)


相关推荐

  • MIPI协议(上)

    MIPI协议(上)一、MIPIMIPI(移动行业处理器接口)是MobileIndustryProcessorInterface的缩写。MIPI(移动行业处理器接口)是MIPI联盟发起的为移动应用处理器制定的开放标准。已经完成和正在计划中的规范如下: 二、MIPI联盟的MIPIDSI规范1、名词解释•DCS(DisplayCommandSet):DCS是一个标准化的命令集,用于…

  • OleDbCommand使用参数应该注意的地方

    OleDbCommand使用参数应该注意的地方最近写程序用到OleDbCommand的Parameter写数据库,遇到很多问题:1、OLEDB.NETFramework数据提供程序和ODBC.NETFramework数据提供程序不支持用于将参数传递到SQL语句或存储过程的命名参数。在此情况下,必须使用问号(?)占位符,如以下示例所示。SELECT*FROMCustomersWHERECustomerID

  • Linux route add_linux系统route命令

    Linux route add_linux系统route命令routeadd命令的主要作用是加入静态路由,通常的格式是:routeADD157.0.0.0MASK255.0.0.0157.55.80.1METRIC3IF2參数含义:destinationmaskgatewaymetricinterface/*能够缩写*/destination【网段地址】mask【子网掩码】gateway【网关地址】…

  • Java是一种什么语言[通俗易懂]

    Java是一种什么语言[通俗易懂]Java是一种计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。Java编程语言的风格十分接近C++语言。继承了C++语言面向对象技术的核心,Java舍弃了C++语言中容易引起错误的指針,改以引用取代,同时移除原C++与原来运算符重载,也移除多重继承特性,改用接口取代,增加垃圾回收器功能。在JavaSE1.5版本中引入了泛型编程、类

  • sigaction 使用

    sigaction 使用函数sigaction原型:intsigaction(intsigno,conststructsigaction*restrictact,structsigaction*restrictoact);@signo信号编号@act要注册的信号动作@oact原信号动作参数structsigactionstructsigaction{

  • Python 3.x | 史上最详解的 导入(import)「建议收藏」

    Python 3.x | 史上最详解的 导入(import)「建议收藏」win10+Python3.6.3一、理解一些基本概念1、包、模块模块module:一般情况下,是一个以.py为后缀的文件。其他可作为module的文件类型还有”.pyo”、”.pyc”、”.pyd”、”.so”、”.dll”,但Python初学者几乎用不到。module可看作一个工具类,可共用或者隐藏代码细节,将相关代码放置在一个module以便让代码更好用、易懂,让cod…

发表回复

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

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