@ViewChild 的三种常用方法

//--1------ 在angular中进行dom操作
<div #dom>这是一个div</div> //放置一个锚点domimport { ElementRef, ViewChild } from '@angular/core';@ViewChild('dom',{static:true}), eleRef:ElementRef;
//static-True表示在运行更改检测之前解析查询结果，false用于在更改检测后解析。默认为false。// dom 操作需要在ngAfterViewInit()中进行
// ViewChild会在ngAfterViewInit()回调函数之前做完工作，也就是说你不能在构造函数中使用这个元素。
ngAfterViewInit(){let attr = this.eleRef.nativeElement;console.log(attr) //<div>这是一个div<div>attr.innerHTML = "@ViewChild的dom操作";attr.color = "red";console.log(attr) //<div>@ViewChild的dom操作<div>
}//--2-------通过放置锚点获取子组件中的方法和属性
//在子组件中有一个run方法<app-test-it #header></app-test-it> //在父组件中引入子组件并放置一个锚点 header
<button (click)="getSonFn()">点击获取子组件里面的方法</button>import {ElementRef,ViewChild} from "angular/core";@ViewChild('header',{static:true}), my:any;getSonFn(){ //这是一个点击方法，点击调用这个方法。this.my.run();
}//--3------通过父组件中注入子组件以获取子组件中的方法和属性
//子组件中：
<p>{{number}}</p>number：number = 0
addNumber（）{this.number++
}//父组件中：
<button (click)="upCount()">number++</button>
<button (click)="downcount()">number--</button>
<app-test-it></app-test-it> //该子组件import {ViewChild} from @angular/core;
import {TestItComponent} from './test/test-it.component";//引入子组件@ViewChild('TestItComponent',{static: ture}) son:TestItComponent; // 核心代码：用于查询子组件，并在本地创建的子组件对象 childcomponent 红注入相同属性。父组件同样有两个方法，自增和自减。upCount（){this.son.addNumber（）;
}
downCount(){this.son.number--;
}

@ViewChild 的三种常用方法相关推荐

java常见的ide_在三个Java IDE中生成的三种常见方法
java常见的ide 在本文中,我研究了NetBeans 8.0.2 , IntelliJ IDEA 14.0.2和Eclipse Luna 4.4.1生成的三种"通用"方法[ e ...
在三个Java IDE中生成的三种常见方法
在本文中,我研究了NetBeans 8.0.2 , IntelliJ IDEA 14.0.2和Eclipse Luna 4.4.1生成的三种"通用"方法[ equals(Objec ...
怎么用html3秒自动跳网页,HTML页面3秒后自动跳转的三种常见方法
在练习中,我分博累发口小定逻间框加题览果些屏洁动理应们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转圈件浏用是刚.它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名呢? 我圈调直年情,量的单框 ...
图像灰度化的三种常见方法源码
图像灰度化是图像处理很基础的一部分,在这里给出图像灰度化的三种常见方法的M源码,以供大家参考~ 平均值法,最大值法,加权平均值法 function f=MyGrayProcessing(Img) [m ...
php中遍历数组_PHP中遍历数组的三种常用方法实例分析
本文实例讲述了PHP中遍历数组的三种常用方法.分享给大家供大家参考,具体如下: 在PHP中操作最多的数据估计也就是数组了,有着效率高.速度快.存储方便的特点. PHP中遍历数组有三种常用的方法: 1. ...
html几秒自动跳转,HTML页面3秒后自动跳转的三种常见方法
在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法方法1: 最简单的一种:直接在前面里面添加代码: 复制代码代码如下: //3秒之后自动 ...
java中3秒自动跳转_HTML页面3秒后自动跳转的三种常见方法
在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法方法1: 最简单的一种:直接在前面里面添加代码: 复制代码代码如下: //3秒之后自动 ...
解决this指代的三种常用方法
解决this指代的三种常用方法 JavaScript语言的this对象一直是一个令人头痛的问题.在这里,我们以一个简单小例子来为大家讲解! 原文链接:https://editor.csdn.net/m ...
3种常见的linux版本,查看linux版本的三种常用方法
1) 登录到服务器执行 lsb_release -a ,即可列出所有版本信息,例如: [root@3.5.5Biz-46 ~]# lsb_release -a LSB Version: 1.3 Dis ...

@ViewChild 的三种常用方法

@ViewChild 的三种常用方法相关推荐

最新文章

热门文章