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 子组件与父组件通讯的更多相关文章

  1. Vue(13)子组件与父组件超详细解析

    父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...

  2. [Vue]子组件与父组件之间传值

    1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...

  3. React子组件与父组件传值

    一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...

  4. Vue子组件与父组件之间的通信

    1.环境搭建 下载 vue-cli:npm install -g vue-cli 初始化项目:vue init webpack vue-demo 进入vue-demo文件夹:cd vue-demo 下 ...

  5. react 实现组件嵌套以及子组件与父组件之间的通信

    当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...

  6. React组件间的通讯

    组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能.接下来我们将从组件之间的关系来分解组件间如何传递数据. 1.父组件向子组件传递数据 通讯是单向的,数据必须 ...

  7. angular组件之间的通讯

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

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

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

  9. Angular10 组件之间的通讯

    1 父组件和子组件之间的通讯 2 利用中间组件实现两个组件之间的通讯 3 利用服务实现两个组件之间的通讯 2017年8月26日20:09:13 待更新... 1 组件之间的关系图 1.1 父子关系 1 ...

随机推荐

  1. Java中发送http的get、post请求

    近期做项目中,须要把消息通过中间件的形式通过http请求的方式推送给第三方,因此用到了http协议,小编花费了一个多小时.对于http协议中的post和get请求,封装了一个工具类.以下与大家分享一下 ...

  2. rev---将文件中的每行内容以字符为单位反序输出

    rev命令将文件中的每行内容以字符为单位反序输出,即第一个字符最后输出,最后一个字符最先输出,依次类推.

  3. ldd---程序所需要的动态链接库

    ldd本身不是一个程序,而仅是一个shell脚本:ldd可以列出一个程序所需要得动态链接库(so) [root@xiaolizi ~ ]$ ldd /usr/bin/ls linux-vdso.so. ...

  4. 【Python】【Head First Python】【chapter1】1 - 导入模块

    导入模块 导入模块有三种方法,以导入sys模块为例: 第一是import module 形式导入 import sys location = sys.stdout 第二是from module imp ...

  5. visualvm监控tomcat

    https://my.oschina.net/weidedong/blog/787203

  6. Gonet2 游戏server框架解析之Agent(3)

    客户端消息在Agent中的预处理流程. Agent定义好的三种请求: //api.go var RCode = map[int16]string{ 0: "heart_beat_req&qu ...

  7. Java Swing设置主窗体位置居中方法

    01.第一种方法 int windowWidth = frame.getWidth(); //获得窗体宽  int windowHeight = frame.getHeight(); //获得窗体高 ...

  8. Supermap 组合单值专题图与标签专题图演示样例

    效果图例如以下:单值专题图并显示每一个区域的相关文字信息 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hmdQ==/font/5a6L5L2T ...

  9. C++ 递归位置排列算法及其应用

    废话不多说,我们先看一下位置排序的算法: #include <iostream> using namespace std; int n = 0; int m = 2; int l = 0; ...

  10. xshell --- 查看和关闭 进程

    netstat -apn | grep 80 kill -l PID  关闭进程