Angular中@Output()的使用方法
子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()的使用方法的更多相关文章
- Angular中的$cacheFactory的作用和用法
1.Angular中的$cacheFactory的作用: (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...
- Angular中使用bootstrap样式
Angular中使用bootstrap样式 Angular中引入bootstrap的方法 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...
- Angular中不同的组件间传值与通信的方法
主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- Angular中怎样创建service服务来实现组件之间调用公共方法
Angular组件之间不能互相调用方法,但是可以通过创建服务来实现公共方法的调用. 实现 创建服务命令 ng g service 服务路径/服务名 比如这里在app/services目录下创建stor ...
- Angular中$broadcast和$emit的使用方法
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
- 单例模式和angular的services的使用方法
在现实生活中存在着有这样的特点的一些类: A.这些类只能有一个实例: B.这些能够自动实例化: C.这个类对整个系统可见,即必须向整个系统提供这个实例. 不妨举一个具体的单例模式的例子:比如教室里面的 ...
随机推荐
- binary-tree-preorder-traversal leetcode C++
Given a binary tree, return the preorder traversal of its nodes' values. For example: Given binary t ...
- 面试官:能用JS写一个发布订阅模式吗?
目录 1 场景引入 2 代码优化 2.1 解决增加粉丝问题 2.2 解决添加作品问题 3 观察者模式 4 经纪人登场 5 发布订阅模式 6 观察者模式和发布订阅模式的对比 什么是发布订阅模式?能手写实 ...
- OpenAPITools 实践
OpenAPITools 可以依据 REST API 描述文件,自动生成服务端桩(Stub)代码.客户端 SDK 代码,及文档等.其是社区版的 Swagger ,差异可见:OpenAPI Genera ...
- 2021.11.4测试T1-妹子
题目 今天测试,直接挂完了 写了四个小时,最后发现自己题目理解错误了 有两个区间,在输入了 \(l\) 和 \(r\) 以后,进行查询 \[ min(max(a_1,a_2,...a_p,b_{p+1 ...
- JavaJDK下载及配置环境变量
卸载jdk 找到原先安装jdk的位置,直接删除这个文件夹,你们叫什么名字就删哪个,我的叫javajdk. 找到我的电脑,右键属性,然后找到环境变量. 删除系统变量里面的JAVA_HOME变量 再双击击 ...
- PTA甲级1094 The Largest Generation (25分)
PTA甲级1094 The Largest Generation (25分) A family hierarchy is usually presented by a pedigree tree wh ...
- 什么是齐博x1标签
X系列的标签跟V系列的标签区别还是很大的.在V系列的时候,只有一种很简单的标签比如$label[XXXX]以前的标签相对现在的来说太简单的点,所以在功能上也比较受限.X系列目前有几下几种标签 {qb: ...
- codeforces心得1---747div2
codeforces心得1---747div2 cf div2的前AB题一般是字符串or数论的找规律结论题 因此标程极为精简 1.小窍门是看样例或者自己打表或造数据找规律 2.一些不确定的操作,可以化 ...
- redis集群安装搭建
vi redis-6379.conf #包含通用配置 include "/usr/local/redis/conf/redis-common.conf" pidfile &qu ...
- 最大连续子数组和--dp
最大连续子数组和 问题: 给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值.当所给的整数均为负数时定义子段 ...