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. libvirt 部分API 介绍

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  2. 改动npm包管理器的registry为淘宝镜像(npm.taobao.org)

    起因 安装了node.安装了npm之后,官方的源实在是 太慢了! 看了看淘宝的npm镜像, http://npm.taobao.org/  居然说让我再下载一个cnpm,要不然就每次都得install ...

  3. mahout处理路透社语料步骤,转换成须要的格式

    首先下载路透社语料(百度就能够下载): 然后上传Linux 并解压到指定文件夹.Tips:此处我放在可 /usr/hadoop/mahout/reutersTest/reuters tar -zxvf ...

  4. Spring MVC 注解式

    1.注解式控制器简介 一.Spring2.5之前,我们都是通过实现Controller接口或其实现来定义我们的处理器类.已经@Deprecated.   二.Spring2.5引入注解式处理器支持,通 ...

  5. Fedora27 安装Adobe Flash Player PPAPI与NPAPI实现Firefox和Chromium视频播放

    一.Adobe Flash Player PPAPI与NPAPI有什么区别我们在打开网页视频时有时会弹出没有安装Flash插件的提示,此时就无法观看视频.Adobe Flash Player是浏览器显 ...

  6. Linux VNC客户端软件VNC Viewer | RealVNC

    Linux很多时候是作为服务器操作系统,如果是桌面系统通常情况会远程管理linux服务器,很多时候通过VNC进行远程管理,这个时候就要在客户端安装VNC客户端软件,VNC Viewer | RealV ...

  7. 我的头上碧空晴朗——数据库存datetime问题

    今天遇到一个问题,数据库mysql存的datetime类型数据.取出来数据居然耍流氓,好好的日期在秒后多了个小数点0 当我用正常的方法, SimpleDateFormat myFmt=new Simp ...

  8. 参考学习《Python学习手册(第4版)》高清中文PDF+高清英文PDF+源代码

    看到第38章了,整体感觉解释详细,例子丰富:关于Python语言本身的讲解全面详尽而又循序渐进不断重复,同时详述语言现象背后的机制和原理:除语言本身,还包含编程实践和设计以及高级主题.边看边写代码.不 ...

  9. iOS 的组件化开发

    在一个APP开发过程中,如果项目较小且团队人数较少,使用最基本的MVC.MVVM开发就已经足够了,因为维护成本比较低. 但是当一个项目开发团队人数较多时,因为每个人都会负责相应组件的开发,常规开发模式 ...

  10. Saltstack的API接口与调用方式

     saltstack看起来是成为一个大规模自己主动化运维和云计算管理的一个框架,类似于SDK,并非像puppet仅仅成为一个工具.基于良好设计的API和清楚的思路,让salt的二次开发变得非常easy ...