一、@ViewChild

父组件中使用@ViewChild拿到子组件的变量和方法(父组件可调用子组件的方法和变量)

parent.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component'; @Component({
selector: 'my-parent',
templateUrl: './parent.component.html',
styleUrls: [ './parent.component.css' ],
})
export class ParentComponent implements OnInit {
//通过@ViewChild注册子组件
@ViewChild(ChildComponent) public child:ChildComponent;
public countNum: number;
public firstName:string = "Jeck";
public fullName:string = ""; constructor() {} ngOnInit(): void { }
displayFull(){
this.fullName = this.firstName + this.child.lastName;
   console.log(this.fullName) //"Jeck wang"
}
}

child.component.ts:

import { Component, OnInit} from '@angular/core';

@Component({
selector: 'my-child',
templateUrl: './child.component.html',
styleUrls: [ './child.component.css' ],
})
export class ChildComponent implements OnInit {
public lastName:string = "wang"; constructor() {} ngOnInit(): void { } }

二、@Inject

子组件中使用@Inject调用父组件中的变量和方法

parent.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'my-parent',
templateUrl: './parent.component.html',
styleUrls: [ './parent.component.css' ],
})
export class ParentComponent implements OnInit { constructor() {} ngOnInit(): void { }
sayHello(){
console.log("Hello!")
}
}

child.component.ts:

import { Component, OnInit, Inject, forwardRef} from '@angular/core';
import { ParentComponent } from './parent.component'; @Component({
selector: 'my-child',
templateUrl: './child.component.html',
styleUrls: [ './child.component.css' ],
})
export class ChildComponent implements OnInit { constructor(
@Inject(forwardRef(()=>ParentComponent)) public parent:ParentComponent
) {} ngOnInit(): void {
this.parent.sayHello(); //"Hello!"
}
}

注意:如果父子模块通过以上方式相互引用,请在父模块中使用 @ViewChild(forwardRef(()=>ChildComponent)) public child:ChildComponent 方式避免父子组件循环引用报错

ng2父子模块通信@ViewChild和@Inject的更多相关文章

  1. ng2父子模块数据交互

    一.父模块向子模块传值 //父html <my-child [childdata]="parentdata"></my-child> 其中,my-child ...

  2. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  3. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  4. 从$emit 到 父子组件通信 再到 eventBus

    故事还是得从$emit说起,某一天翻文档的时候看到$emit的说明 触发当前实例上的事件?就是自身组件上的事件呗,在父子组件通信中,父组件通过props传递给子组件数据(高阶组件可以用provide和 ...

  5. vue组件通信之父子组件通信

    准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html  vue 脚手架安装及新建项目 ...

  6. 总结Vue第二天:自定义子组件、父子组件通信、插槽

    总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...

  7. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  8. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  9. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

随机推荐

  1. 给定一颗完全二叉树,给每一层添加上next的指针,从左边指向右边

    给你机会发出声音,但是不给你机会证明高层的决定是错的 RT: 时间复杂度O(n) 空间复杂度O(1)  原理就是有指针指向父节点和当前的节点,左孩子必指向右孩子,右孩子必指向父节点的下一个节点的左孩子 ...

  2. 详解spring boot实现多数据源代码实战

    之前在介绍使用JdbcTemplate和Spring-data-jpa时,都使用了单数据源.在单数据源的情况下,Spring Boot的配置非常简单,只需要在application.propertie ...

  3. mongo数据库中一条记录中某个属性是数组情形时 数据结构的定义

    package entity; import java.util.Date; import com.mongodb.BasicDBList;import com.mongodb.DBObject; p ...

  4. Linux 日志命令

    当日志文件存储日志很大时,我们就不能用vi直接进去查看日志,需要Linux的命令去完成我们的查看任务 Log位置: /var/log/message 系统启动后的信息和错误日志,是Red Hat Li ...

  5. Hadoop实战-Flume之Sink Load-balancing(十七)

    a1.sources = r1 a1.sinks = k1 k2 a1.channels = c1 # Describe/configure the source a1.sources.r1.type ...

  6. 【Java线程】锁机制:synchronized、Lock、Condition(转)

    原文地址 1.synchronized 把代码块声明为 synchronized,有两个重要后果,通常是指该代码具有 原子性(atomicity)和 可见性(visibility). 1.1 原子性 ...

  7. 剑指Offer:栈的压入、弹出序列【31】

    剑指Offer:栈的压入.弹出序列[31] 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈 ...

  8. 认识与入门 Markdown

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...

  9. 《CSS权威指南(第三版)》---第五章 字体

    这章主要的内容有: 1.字体:一般使用一种通用的字体. 2.字体加粗:一般从数字100 -900 . 3.字体大小:font-size 4.拉伸和调整字体:font-stretch 5.调整字体大小: ...

  10. 使用diff制作补丁【学习笔记】

    源文件:main.c #include <stdio.h> int main() { printf("hello"); } 修改之后的文件: main1.c #incl ...