angular5 组件之间监听传值变化
http://www.cnblogs.com/SLchuck/p/5904000.html
https://i.cnblogs.com/EditPosts.aspx?postid=7995179&update=1
https://segmentfault.com/a/1190000010048073
agular5 父子组件之间传值是实用
- 第一类:父子组件间的通信
- @Input 和@Output
当然一般传值变化是指父组件像子组件传的值变化的情况,如地图zoom变化
当筛选范围变化时地图比例尺变化地图随着缩放,这是地图控件就要监听父组件的筛选范围值变化
import {
Component,
OnInit,
Input,
Output,
EventEmitter,
OnDestroy,
ElementRef,
OnChanges,
SimpleChanges
} from '@angular/core'; /*import {loader} from './loader';*/
/*import {BAIDU_MAP_STYLE} from './map';*/
/*import any = jasmine.any;*/ declare const BMap: any; @Component({
selector: 'app-baidu-map',
templateUrl: './baidu-map.component.html',
styleUrls: ['./baidu-map.component.css']
})
export class BaiduMapComponent implements OnInit, OnChanges { @Input() address: string = '深圳';
@Input() apiKey: string = 'sIq3pmhG5n4xVuKQ8eKr1BiV0hsLP2ek';
@Input() center: any;
@Input() zoom = 15;
@Input() enableScrollWheelZoom = false; //鼠标是否可滚动缩放 默认不可以
@Input() zoomControl = false; //是否有缩放控件 默认没有 @Output() getLocation: EventEmitter<any> = new EventEmitter(); geoAddress = ''; constructor(private elementRef: ElementRef) {
} ngOnInit() { //不需要init because zoom一进来就变化了就触发onChange函数执行loader去initMap了所以此处不需要loader /* var address = this.geoAddress ? this.geoAddress : this.address;
loader(this.apiKey, this.initMap.bind(this,address));*/
} ngOnChanges(changes: SimpleChanges) {
//当zoomlevel改变刷新地图时marker不需要初始化位最开始定位的
var address = this.geoAddress ? this.geoAddress : this.address;
this.loader(this.apiKey, this.initMap.bind(this, address));
}
} 这样就可以监听了(注意标红的代码)
- forwardref(父获得子实例)
import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core';
import{ParentPage} from '../parent/parent';
@Component({
selector: 'page-child',
templateUrl: 'child.html',
})
export class ChildPage {
constructor( @Host() @Inject(forwardRef(() => ParentPage)) app: ParentPage) {
setInterval(() => {
app.i++;
}, 1000);
}
}
- @viewChild(父获得实例)
import {ViewChild, Component } from '@angular/core';
import{ChildPage}from '../child/child';
@Component({
selector: 'page-parent',
templateUrl: 'parent.html',
})
export class ParentPage {
@ViewChild(ChildPage) child:ChildPage;
ngAfterViewInit() {
setInterval(()=> {
this.child.i++;
}, 1000)
}
}
共用一个service
subject
eventEmitter
angular5 组件之间监听传值变化的更多相关文章
- vue中父组件如何监听子组件值的变化
vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...
- Android实现后台长期监听时间变化
1.首先我们的目的是长期监听时间变化,事实上应用程序退出. 通过了解我们知道注冊ACTION_TIME_TICK广播接收器能够监听系统事件改变,可是 查看SDK发现ACTION_TIME_TICK广播 ...
- 对于单页应用中如何监听 URL 变化的思考
周末开发了一个在 GitHub 中给 repo 增加自定义备注的 chrome 扩展. 开发这个扩展的原因是我在 GitHub 中所 star 的项目实在太多了(截止目前 671 个),有的项目过个几 ...
- javafx 监听选择变化(TabPane)
editTab.getSelectionModel().selectedIndexProperty().addListener(evnt); javafx2.0 监听树和表的选择变化 Swing中的组 ...
- React和Vue中,是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
- vue项目如何监听窗口变化,达到页面自适应?
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- Angular.js中使用$watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
- $scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
随机推荐
- SpringMVC学习笔记二第一个小的程序
首先:我们要用springmvc来写一个helloworld的例子: 首先我们需要导入所需要的架包: /demo1/WebRoot/WEB-INF/lib/commons-logging-1.1.1. ...
- MySQL实现SQL Server排名函数
最近在MySQL中遇到分组排序查询时,突然发现MySQL中没有row_number() over(partition by colname)这样的分组排序.并且由于MySQL中没有类似于SQL Ser ...
- bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
- js匿名自执行函数中闭包的高级使用(---------------------------******-----------------------------)
先看看最常见的一个问题: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- web.xml+spring mvc基本配置
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...
- AngularJs表单自动验证
angular-auto-validate 地址:https://github.com/jonsamwell/angular-auto-validate 引用: <script src=&quo ...
- jQuery 对象
jQuery 对象 版权声明:未经博主授权,严禁转载分享 什么是 jQuery 对象 jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象. jQuery 对象是一个类数组对象. j ...
- troubleshooting-windows 在 CDH集群环境读取 Hive 表 KrbException: Cannot locate default realm
KrbException: Cannot locate default realm 解决办法 1)拷贝需要组件的配置文件到项目中的 /resources/目录.如hadoop,目录/etc/hadoo ...
- 20145225唐振远《网络对抗》 Web安全基础实践
20145225唐振远<网络对抗>Web安全基础实践 参考博客:20145215 卢肖明 基础问题回答 (1)SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web ...
- 20145225唐振远《网络对抗》Exp4 恶意代码分析
20145225唐振远<网络对抗>Exp4 恶意代码分析 基础问题回答 如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪 ...