我们知道在angular2中ts文件支持js代码,为什么用document.getElementById没法获取元素节点呢?

我们知道在angular2中ts文件支持js代码,为什么用document.getElementById没法获取元素节点呢?

其实在angular2中先加载ts文件,再加载view,所以获取不到节点。

美高梅电子游戏,其实在angular2中先加载ts文件,再加载view,所以获取不到节点。

在应用层直接操作
DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如
web worker 中,因为在 web worker 环境中,是不能直接操作 DOM。

在应用层直接操作
DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如
web worker 中,因为在 web worker 环境中,是不能直接操作 DOM。

通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素
(在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular
提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。

通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素
(在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular
提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。

angular2有生命周期钩子AfterViewInit可以帮助我们在view加载完之后再执行相应的ts

angular2有生命周期钩子AfterViewInit可以帮助我们在view加载完之后再执行相应的ts

ts:

ts:

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

exportclassAppComponent { 

constructor(privateelementRef: ElementRef) {

 }

ngAfterViewInit() {

  let divEle =this.elementRef.nativeElement.querySelector('div');//获取第一个div

  console.dir(divEle);

  let div = doxcument.getElementById("div");  //获取id为‘div'的节点

}

}

import { Component, ElementRef ,AfterViewInit} from ‘@angular/core’;

下面有一种优化方案,运用angular内置属性装饰器@ViewChild

exportclassAppComponent { 

ts:

constructor(privateelementRef: ElementRef) {

import{ Component, ElementRef, ViewChild, AfterViewInit }from'@angular/core';

exportclassAppComponent{

@ViewChild('greet')

 greetDiv: ElementRef;

ngAfterViewInit() {this.greetDiv.nativeElement.style.backgroundColor ='red'; }

}

* }*

html:

ngAfterViewInit() {

<div #greet>hello world</div>  //element的标识"#name",@ViewChild根据这个搜索元素

    let  divEle
=this.elementRef.nativeElement.querySelector(‘div’);//获取第一个div

angular中怎么获取dom元素

    console.dir(divEle);

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注