angular 子组件与父组件通讯
1. 子组件app-sidebar.compnent.html
(click)="goProject()"设置点击事件
<mat-list-item [routerLink]="['/project']" (click)="goProject()">
....
</mat-list-item>
2. 子组件app-sidebar.component.ts
用EventEmitter()方法向父级输出信息。
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['']
})
export class SidebarComponent implements OnInit { @Output() closeSide = new EventEmitter<void>();
constructor() { } goProject(){
// 这里可以传参
this.closeSide.emit("data");
} }
3. 父组件app.component.html接收到closeSide方法。
// 没有参数的时候 <app-sidebar (closeSide)="drawer.toggle()"></app-sidebar> // 需要接收传参的时候,一定要加上$event
<app-sidebar (closeSide)="toggle($event)"></app-sidebar> toggle(data){
console.log(data); // 'data'
}
angular 子组件与父组件通讯的更多相关文章
- Vue(13)子组件与父组件超详细解析
父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...
- [Vue]子组件与父组件之间传值
1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...
- React子组件与父组件传值
一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...
- Vue子组件与父组件之间的通信
1.环境搭建 下载 vue-cli:npm install -g vue-cli 初始化项目:vue init webpack vue-demo 进入vue-demo文件夹:cd vue-demo 下 ...
- react 实现组件嵌套以及子组件与父组件之间的通信
当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...
- React组件间的通讯
组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能.接下来我们将从组件之间的关系来分解组件间如何传递数据. 1.父组件向子组件传递数据 通讯是单向的,数据必须 ...
- angular组件之间的通讯
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- Angular中不同的组件间传值与通信的方法
主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...
- Angular10 组件之间的通讯
1 父组件和子组件之间的通讯 2 利用中间组件实现两个组件之间的通讯 3 利用服务实现两个组件之间的通讯 2017年8月26日20:09:13 待更新... 1 组件之间的关系图 1.1 父子关系 1 ...
随机推荐
- Java中发送http的get、post请求
近期做项目中,须要把消息通过中间件的形式通过http请求的方式推送给第三方,因此用到了http协议,小编花费了一个多小时.对于http协议中的post和get请求,封装了一个工具类.以下与大家分享一下 ...
- rev---将文件中的每行内容以字符为单位反序输出
rev命令将文件中的每行内容以字符为单位反序输出,即第一个字符最后输出,最后一个字符最先输出,依次类推.
- ldd---程序所需要的动态链接库
ldd本身不是一个程序,而仅是一个shell脚本:ldd可以列出一个程序所需要得动态链接库(so) [root@xiaolizi ~ ]$ ldd /usr/bin/ls linux-vdso.so. ...
- 【Python】【Head First Python】【chapter1】1 - 导入模块
导入模块 导入模块有三种方法,以导入sys模块为例: 第一是import module 形式导入 import sys location = sys.stdout 第二是from module imp ...
- visualvm监控tomcat
https://my.oschina.net/weidedong/blog/787203
- Gonet2 游戏server框架解析之Agent(3)
客户端消息在Agent中的预处理流程. Agent定义好的三种请求: //api.go var RCode = map[int16]string{ 0: "heart_beat_req&qu ...
- Java Swing设置主窗体位置居中方法
01.第一种方法 int windowWidth = frame.getWidth(); //获得窗体宽 int windowHeight = frame.getHeight(); //获得窗体高 ...
- Supermap 组合单值专题图与标签专题图演示样例
效果图例如以下:单值专题图并显示每一个区域的相关文字信息 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hmdQ==/font/5a6L5L2T ...
- C++ 递归位置排列算法及其应用
废话不多说,我们先看一下位置排序的算法: #include <iostream> using namespace std; int n = 0; int m = 2; int l = 0; ...
- xshell --- 查看和关闭 进程
netstat -apn | grep 80 kill -l PID 关闭进程