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)


相关推荐

  • 高斯滤波原理及应用_数字图像处理高斯滤波器

    高斯滤波原理及应用_数字图像处理高斯滤波器1一维高斯分布 1.1一维高斯分布的定义 若连续型随机变量X的概率密度为:其中,为常数,则称X服从参数为,的正态分布或高斯分布,记为 1.2一维高斯分布的曲线 横轴表示可能的取值x,竖轴表示概率分布密度F(x),那么不难理解这样一个曲线与x轴围…

    2022年10月22日
  • 撸明白分布式事务(四)

    撸明白分布式事务(四)前言在分布式系统中,消息队列在服务端的架构中的地位非常重要,主要解决异步处理、系统解耦、流量削峰等场景。多个系统之间如果同步通信很容易造成阻塞,同时会将这些系统会耦合在一起。因此,引入了消息队列,一方面解决了同步通信机制造成的阻塞,另一方面通过消息队列进行业务解耦。简单的服务间调用引入mq如下图所示可靠事件模式可靠事件模式,通过引入可靠的消息队列,只要保证当前的可靠事件投递并且消息队列确保事件传递至少一次,那么订阅这个事件的消费者保证事件能够在自己的业务内被消费即可。这里,请读者思考,是否.

  • 【吐血整理】Java项目源码分享

    【吐血整理】Java项目源码分享javaservlet+jsp+bean开发开源宅商城系统,未用任何java开源框架实例(七),电商书店,源码下载:jsp+servlet仿当当网电商图书系统实例(八),源码下载:jsp+javabean+servlet开发的mvc简易鞋城在线商城系统各种管理系统:=======实例(一):学生信息管理系统,源码下载:GitHub-yirenyin/J2EE_practice:J2EE学生信息管理系统初级版实例(二):图书馆管理系统,源码下载:1、图书馆管理系统JSP+Ser

  • [重点]delphi 实现 根据给定的标题去《中国青年报》网上电子报数据中查找匹配的内容,并从该内容中取出引题、正题、副题、作者和正文。

    [重点]delphi 实现 根据给定的标题去《中国青年报》网上电子报数据中查找匹配的内容,并从该内容中取出引题、正题、副题、作者和正文。项目要求:根据给定的标题去《中国青年报》网上电子报数据中查找匹配的内容,并从该内容中取出引题、正题、作者和正文。

  • 计算机中进制转换方法_电脑进制转换方法

    计算机中进制转换方法_电脑进制转换方法计算机进制转换方法从小我们就开始学数学数学就有涉及到进制知识相信大家对于进制都不陌生吧进制也就是进位制是一种进位方法现在大家都有电脑利用电脑自带的计算机进行进制转换是最简便的方法下面是由百分网小编为大家准备的计算机进制转换方法喜欢的可以收藏一下!了解更多详情资讯请关注应届毕业生考试网!计算机中常用的进制主要有:二进制、八进制、十六进制学习计算机要对其有所了解2进制用两个阿拉伯数字:0、1;8进制用…

    2022年10月24日

发表回复

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

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