angularjs子组件向父组件传值_react子组件传值

angularjs子组件向父组件传值_react子组件传值Angular父组件给子组件传值的方法与注意事项

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Angular之父组件给子组件传值

父组件给子组件传值 格式

假如定义一个父组件为home 子组件为header代码如下:

父组件html代码:

<app-header [msg]="msg" [run]="run"></app-header>
<br>
------------------
<br>

我是首页组件

父组件component代码:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  public msg:string="这是父组件的msg";
  ngOnInit(): void {
  }
  public run(){
    alert("这是父组件的run方法");
  }
}

子组件html代码:

<header>我是头部</header>

<button (click)="getrun()">获取父组件的方法</button>
<button (click)="getmsg()">获取子组件的方法</button>

子组件component代码:

import { Component, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }
  @Input() msg:any;
  @Input() run:any;
  ngOnInit(): void {
  }
  public getmsg(){
    alert(this.msg)
  }
  public getrun(){
    this.run();
  }
 
}

注意:

1.子组件接收父组件传递值需要和父组件的[名字]一致,

2.子组件接收值需要在component中引入Input模块

3.父组件在传递方法不需要加()

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

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

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

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

(0)


相关推荐

  • idea2021.8.2 激活码【永久激活】[通俗易懂]

    (idea2021.8.2 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~BI7JCUH1TG-eyJsaWNlb…

  • tornado利用check_xsrf_cookie()防止XSRF

    tornado利用check_xsrf_cookie()防止XSRFtornado利用check_xsrf_cookie()防止XSRF

  • jvm字符串常量池_java 常量池

    jvm字符串常量池_java 常量池字符串字符串字面量:就是指这个字符串本身,比如”Java”,”Hello”。字符串对象:比如newString(“abc”),或者直接Strings=”str”,后面的”str”也是一个字符串对象。字符串引用:引用就是一个变量,指向对应的字符串对象。常量池class常量池Java源文件编译之后得到的class文件,其中有项信息就是常量池,保存有字面量和符号引用,比如publicclassJ…

  • CRTMP视频直播服务器部署及测试

    CRTMP视频直播服务器部署及测试一、搭建CRTMP视频直播服务器1、下载CRTMP服务器软件svnco–usernameanonymous–password””https://svn.rtmpd.com/crtmpserver/trunkcrtmpserver2、进入一下目录,

  • linux ettercap,CentOS下安装ettercap

    linux ettercap,CentOS下安装ettercapCentOS下安装ettercapettercap下载地址http://ettercap.sourceforge.net/download.php下载好之后解压出来,进入到解压目录#tarzxvfettercap-NG-0.7.3.tar.gz#cdettercap-NG-0.7.3阅读README#vimREADMEMANDATORY://安装必须依赖的libpcap>=…

  • adfs是什么_培训与开发的概念

    adfs是什么_培训与开发的概念(如您转载本文,必须标明本文作者及出处。如有任何疑问请与我联系me@nap7.com)ADFS相关开发技术的中文资料相对匮乏,之前在弄这个东西的时候搞的比较辛苦,因此总结此文档,以解后人之忧。本文会首先介绍与联合身份验证有关的概念及相关的系统设计意图,随后会对ADFS联合身份验证的配置过程、结构及处理流程进行阐述。然后会基于已有的系统提出一个支持多ADFS联合身份验证的改进实例…

    2022年10月27日

发表回复

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

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