angular4父组件向子组件传值,子组件向父组件传值的方法

angular4父组件向子组件传值,子组件向父组件传值的方法父组件向子组件传值@Input文件目录父组件:father.template.html<h1>父组件</h1><cmt-child[data]=’data’></cmt-child>father.component.tsimport{Component,OnIn…

大家好,又见面了,我是你们的朋友全栈君。

父组件向子组件传值 @Input

文件目录

1250245-20181019162504929-1031754682.png

父组件:

father.template.html

<h1>父组件</h1>
<cmt-child [data]='data'></cmt-child>

father.component.ts

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

@Component({
    selector: 'cmt-father',
    templateUrl: './father.template.html'
})
export class FatherComponent implements OnInit {
    data: any = '我是传往子组件的值'
    ngOnInit() {
    }

    ngOnChanges() {
    }

}

子组件:(使用@Input修饰器去接收)

childcomponent.ts

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

@Component({
    selector: 'cmt-child',
    templateUrl: './child.template.html'
})
export class ChildComponent implements OnInit {
    @Input() data: any;//接收父组件的值
    ngOnInit() {
        console.log(this.data)
    }

    ngOnChanges() {
        console.log(this.data)
    }

}

这样就把值从父组件传到了子组件!

子组件向父组件传值(子组件通过方法借助修饰器@output传值给父组件)

子组件

childcomponent.ts

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

@Component({
    selector: 'cmt-child',
    templateUrl: './child.template.html'
})
export class ChildComponent implements OnInit {
    @Output('checked') checkedBack = new EventEmitter<any>();
    id:any ="我是传给父组件的值"
    ngOnInit() {
    }

    ngOnChanges() {
    }
    checkedCallback() {
        this.checkedBack.emit(this.id);
    }
}

child.template.html.html

<h1>子组件</h1>
<button (click)='checkedCallback()'>点击传值给父组件</button>

父组件

father.template.html

<h1>父组件</h1>
<cmt-child (checked)="checkedBack($event)"></cmt-child>

father.component.ts

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

@Component({
    selector: 'cmt-father',
    templateUrl: './father.template.html'
})
export class FatherComponent implements OnInit {
    ngOnInit() {
    }

    ngOnChanges() {
    }
    
    checkedBack(event) {
        console.log(event)
    }
}

这样子组件通过点击就把值传递给了父组件!

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

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

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

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

(0)
blank

相关推荐

  • 微信三级分销合法吗

    微信三级分销合法吗随着微商的快速崛起,越来越多的微信用户开始做微商赚取外快,身边的朋友也慢慢接受朋友圈满天飞的广告信息。当然,很多主流媒体也开始进行微商的正面报道,但,微信分销(微商)和我们所接触的传销是在太像了,这让我们不仅要问,微信分销真的合法吗?时下流行的微信三级分销究竟是不是传销,相比看完这篇文章您就知…

  • 使用HttpClient4实现文件上传请求的发送,服务器端以MultipartFile形式接收(附依赖jar包地址)

    使用HttpClient4实现文件上传请求的发送,服务器端以MultipartFile形式接收(附依赖jar包地址)今天学习使用了HttpClient4.2向服务端发送上传文件的请求,由于服务器端以MultipartFile形式接收,查询资料后决定使用HttpClient4.2实现,以下是实现代码(仅作测试使用):publicvoidtesttaskPost()throwsException{HttpClienthttpclient=newDefaultHttpClien

  • pycharm2021.3.3激活 mac破解方法[通俗易懂]

    pycharm2021.3.3激活 mac破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Eclipse自动补全设置(终极方案)

    Eclipse自动补全设置(终极方案)Eclipse自动补全、字体、护眼色、tomcat、导包1.设置字体2.设置护眼色3.设置自动补全4.配置Tomcat服务器5.配置默认JSP编码6.无法导包解决方案1.设置字体2.设置护眼色3.设置自动补全26字母和”.”均会提示:Java和Java类型补全建议+26字母异常强大的补全提示:4.配置Tomcat服务器5.配置默认JSP编码6.无法导包解决方案…

  • 解决Visual Studio中scanf返回值被忽略问题

    解决Visual Studio中scanf返回值被忽略问题最近在使用VisualStudio编写c语言时遇到了scanf返回值被忽略问题,下面总结了几种解决方法:总结了如下几种解决方法:方法一scanf修改成scanf_s可以说scanf_s是vs编译器特有的,它认为scanf不安全,所以不允许你用而让你用它自己定义的scanf_s。方法二开头添加#define_CRT_SECURE_NO_WARNINGS方法三开头添加#…

    2022年10月23日
  • python数组操作方法_数组 python

    python数组操作方法_数组 python这篇文章主要介绍了简单了解python数组的基本操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一,创建列表创建一个列表,只要把逗号分隔的不同的数据项使用方括号括起来:member=[‘a’,’b’,’c’,’1′,’2′,3]二,访问列表列表索引从0开始,使用下标索引来访问列表中的值:member=[‘a’,’b’,’c’,’1′,’…

发表回复

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

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