子component中的html文件

<button (click)="Send()">送出</button><br>

子component中的ts文件

import { Component, OnInit, Output } from '@angular/core';
import { EventEmitter } from '@angular/core'; @Component({
selector: 'app-todo-input',
templateUrl: './todo-input.component.html',
styleUrls: ['./todo-input.component.css']
})
export class TodoInputComponent implements OnInit {
public content: string;
@Output() onSend: EventEmitter<string> = new EventEmitter<string>();
constructor() { } ngOnInit(): void {
this.content = "Hello";
} Send(){
this.onSend.emit(this.content);
}
}

父component中的html

<app-todo-input (onSend)="onSend($event)"></app-todo-input>

父component中的ts

import { Component, OnInit } from '@angular/core';
import {Todo} from '../../models/todo' @Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit { public List:Todo[]=[]; constructor() { } ngOnInit(): void {
// this.List = [
// {id:1,content:'Test'},
// {id:2,content:'Test2'},
// {id:3,content:'Test3'},
// ];
}
onSend(content: string){
alert(content);
} }

												

Angular中@Output()的使用方法的更多相关文章

  1. Angular中的$cacheFactory的作用和用法

    1.Angular中的$cacheFactory的作用:    (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...

  2. Angular中使用bootstrap样式

    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...

  3. Angular中不同的组件间传值与通信的方法

    主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...

  4. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  5. Angular中怎样创建service服务来实现组件之间调用公共方法

    Angular组件之间不能互相调用方法,但是可以通过创建服务来实现公共方法的调用. 实现 创建服务命令 ng g service 服务路径/服务名 比如这里在app/services目录下创建stor ...

  6. Angular中$broadcast和$emit的使用方法

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...

  7. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  8. Angular中ngCookies模块介绍

    1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...

  9. 单例模式和angular的services的使用方法

    在现实生活中存在着有这样的特点的一些类: A.这些类只能有一个实例: B.这些能够自动实例化: C.这个类对整个系统可见,即必须向整个系统提供这个实例. 不妨举一个具体的单例模式的例子:比如教室里面的 ...

随机推荐

  1. binary-tree-preorder-traversal leetcode C++

    Given a binary tree, return the preorder traversal of its nodes' values. For example: Given binary t ...

  2. 面试官:能用JS写一个发布订阅模式吗?

    目录 1 场景引入 2 代码优化 2.1 解决增加粉丝问题 2.2 解决添加作品问题 3 观察者模式 4 经纪人登场 5 发布订阅模式 6 观察者模式和发布订阅模式的对比 什么是发布订阅模式?能手写实 ...

  3. OpenAPITools 实践

    OpenAPITools 可以依据 REST API 描述文件,自动生成服务端桩(Stub)代码.客户端 SDK 代码,及文档等.其是社区版的 Swagger ,差异可见:OpenAPI Genera ...

  4. 2021.11.4测试T1-妹子

    题目 今天测试,直接挂完了 写了四个小时,最后发现自己题目理解错误了 有两个区间,在输入了 \(l\) 和 \(r\) 以后,进行查询 \[ min(max(a_1,a_2,...a_p,b_{p+1 ...

  5. JavaJDK下载及配置环境变量

    卸载jdk 找到原先安装jdk的位置,直接删除这个文件夹,你们叫什么名字就删哪个,我的叫javajdk. 找到我的电脑,右键属性,然后找到环境变量. 删除系统变量里面的JAVA_HOME变量 再双击击 ...

  6. PTA甲级1094 The Largest Generation (25分)

    PTA甲级1094 The Largest Generation (25分) A family hierarchy is usually presented by a pedigree tree wh ...

  7. 什么是齐博x1标签

    X系列的标签跟V系列的标签区别还是很大的.在V系列的时候,只有一种很简单的标签比如$label[XXXX]以前的标签相对现在的来说太简单的点,所以在功能上也比较受限.X系列目前有几下几种标签 {qb: ...

  8. codeforces心得1---747div2

    codeforces心得1---747div2 cf div2的前AB题一般是字符串or数论的找规律结论题 因此标程极为精简 1.小窍门是看样例或者自己打表或造数据找规律 2.一些不确定的操作,可以化 ...

  9. redis集群安装搭建

    vi redis-6379.conf   #包含通用配置 include "/usr/local/redis/conf/redis-common.conf" pidfile &qu ...

  10. 最大连续子数组和--dp

    最大连续子数组和 问题: 给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值.当所给的整数均为负数时定义子段 ...