首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ViewChild是空的,因为它不在dom (NGIF)中,有没有一种方法可以写一个函数在找到它时运行?

在Angular中,ViewChild是用来获取组件或指令中的DOM元素或子组件的引用的装饰器。根据提供的问答内容,ViewChild是空的,可能是因为它所引用的元素或组件不在DOM中,可能是由于条件指令(如NGIF)的影响。

如果想要在找到ViewChild时运行一个函数,可以使用ngAfterViewInit生命周期钩子函数。ngAfterViewInit会在组件的视图和子视图初始化完成后被调用,此时ViewChild应该已经被正确地初始化。

以下是一个示例代码:

代码语言:typescript
复制
import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="condition">
      <p #myElement>ViewChild Example</p>
    </div>
  `,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('myElement') myElement: ElementRef;

  condition: boolean = true;

  ngAfterViewInit() {
    if (this.myElement) {
      // 在ViewChild找到后执行的代码
      console.log('ViewChild已找到');
    }
  }
}

在上述示例中,我们使用了条件指令NGIF来控制DOM元素的显示与隐藏。当condition为true时,ViewChild所引用的元素会被添加到DOM中。在ngAfterViewInit中,我们检查this.myElement是否存在,如果存在则表示ViewChild已找到,可以执行相应的代码。

需要注意的是,ngAfterViewInit只会在组件的视图和子视图初始化完成后被调用一次。如果ViewChild所引用的元素在后续发生变化,需要使用其他方法来监听变化并执行相应的操作。

希望以上信息对您有所帮助!如果需要了解更多关于Angular的知识,可以参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular DOM 抽象概述

作用 应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们应用无法运行在不同环境,如 Web Worker 因为 Web Worker 环境不能操作 DOM。...模板元素一种机制,允许包含加载页面不渲染,但又可以随后通过 JavaScript 进行实例化客户端内容。我们可以将模板视作为存储页面上稍后使用一小段内容。...,Angular 为我们开发者提供了 元素, Angular 内部主要应用在结构指令,比如 *ngIf、*ngFor 等。...ViewRef ViewRef 一种抽象类型,用于表示 Angular 视图。 Angular ,视图构建应用程序 UI 界面基础构建块。...那么有没有办法不用创建一个额外元素呢?答案有的,就是使用 元素。

3.5K30

AngularDart 4.0 高级-生命周期钩子 顶

组件有一个由Angular自己管理生命周期。 Angular创建,渲染,创建和渲染子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM删除之前对其进行销毁。...开发人员可以通过Angular core库实现一个或多个Lifecycle Hook界面来挖掘该生命周期中关键时刻。 每个接口都有一个单一钩子方法,其名称是以ng开头接口名称。...可以ngOnInit和routerOnActivate之间绘制一个平行线。 两者前缀都是为了避免碰撞,并且组件初始化时都运行正确。...它们遵循一种常见模式:父组件作为一个子组件一个或多个生命周期钩子方法测试装备。 以下每个练习简要说明: 组件 描述 Peek-a-boo 演示每个生命周期钩子。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下name属性)构造没有分配值。

6.1K10

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

angular脏检测机制基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...问题二:为什么用[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者会移除。...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示都需要显式调用一下...这并不是说都不要用*ngIf因为当页面元素太多时会容易导致界面卡顿,所以没用多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...是的,大多场景可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。

1.4K20

Angular 从入坑到挖坑 - 组件食用指南

index 属性每次迭代,会获取到条数据索引值 当渲染数据发生改变 4,会导致 dom 元素重新渲染,此时可以采用 trackBy 方式,通过组件添加一个方法,指定循环需要跟踪属性值...,可以使用管道对于表达式结果进行转换 管道一种简单函数,它们接受输入值并返回转换后值。...,添加了三个特殊运算符 管道运算符 管道一种特殊函数可以把运算符(|)左边数据转换成期望呈现给视图数据格式,例如,将时间进行格式化、将数据转换成 json 字符串形式等等 可以针对一个数据使用多个管道进行串联...name}} 非断言运算符不会防止出现 null 或 undefined,只是不提示 4.3.2、常用管道函数 纯管道 只有检测到输入值发生了纯变更才会执行,但是会忽略对象内部变更...组件中使用服务 需要使用组件引入服务,然后组件构造函数通过依赖注入方式注入这个服务,就可以组件完成对于这个服务使用 父组件对数据进行赋值,然后调用服务方法改变数据信息

15.8K30

Angular ViewChild和ViewChildren

视图查询 ngAfterViewInit 钩子函数调用前完成,因此 ngAfterViewInit 钩子函数,就能正常获取查询元素。... 保持登录30天 基于上面的模板,我们可以简单创建一个 AuthMessageComponent 组件: import { Component...该装饰器用来从模板视图中获取匹配多个元素,返回结果一个 QueryList 集合。...nativeElement 属性,你会发现该属性对应原生 DOM 元素,因此我们可以 ngAfterViewInit 生命周期钩子执行某些 DOM 操作: ngAfterViewInit(...但在实际项目中,我们不推荐直接使用 DOM API 执行 DOM 操作,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

2.7K20

【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

---- 前言 这一篇我们带来关于组件基础使用最后一块,内容投影和Vue插槽很类似,组件封装时候非常有用,我们一起来体验一下。 正文 1....投影子元素 使用ng-container来包裹子元素,减少不必要dom层,类似vuetemplate 容器组件这样 编号4 <ng-content select="question...在这种情况下,不建议使用 ng-content 元素,<em>因为</em>只要组件<em>的</em>使用者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 <em>ngIf</em> 语句<em>的</em>内部,该内容也总会被初始化...使用 ng-template 元素,你<em>可以</em>让组件根据你想要<em>的</em>任何条件显式渲染内容,并<em>可以</em>进行多次渲染。<em>在</em>显式渲染 ng-template 元素之前,Angular 不会初始化该元素<em>的</em>内容。...: ContentDirective; } 通过日志<em>可以</em>看到我们<em>在</em>切换容器组件<em>的</em>expanded标识<em>时</em>,只有开启状态my-hello组件才会初始化,下面的这个<em>ngIf</em>虽然<em>在</em>页面看不到渲染<em>的</em>内容,但组件实实在在被初始化过了

52430

【技巧】ionic3独享滚动区域之滑动segment

想象一下这样一个场景,通过segment切换页面,通过*ngIf等类似指令来模拟显示不同页面的内容,代码表示如下: <div *ngIf="vm.selectedSegment...ion-content滚动条,也就是说,当列表1滚动到一定距离,当切换到列表2显示,列表2已滚动到列表1所位置了(效果图我就不上了),鉴于此,我们可以每个div外面再包一层,此层滚动区域代替...注意:这里selectedSegment我使用了字符串,而不是理论上应该适用整型,因为版本问题,整型值赋给ion-segment-buttonvalue,内部有时把处理为整型,有时又处理为字符串型...此时试着运行可以看到效果,只是此时效果并不是想要效果,因为ion-slides默认居中,且禁用垂直滚动!...*注意:这里为了演示独享滚动条使用了ion-slides,实际应用上我更喜欢用swiper.js,因为ion-slides总有些奇奇怪怪情况出现,就像我【Appetite】ionic3实录(七)次页实现及分析解决问题

1.7K20

Angular v8 发布!来看看有什么新功能

这意味着同一行、列或对角线不能有其他皇后。 n皇后问题一种解决方案 计算棋盘上所有可能解决方案算法被认为计算密集型。...差异加载 目前将程序编译成旧 ECMAScript 5 代码仍然很常见因为“古老 JavaScript ”今天仍然在到处运行。...虽然它们早期版本中被用于组件请求不在结构指令内元素,如 ngIf 或 ngFor,但查询结果已在 ngOnInit 可用。...这只在不在结构指令才有效。使用 static:false 启动或刷新视图后进行解析。 ng update 命令 会自动尝试在此处输入正确值。...有关如何使用 $location 替换详细描述(用于更好地交织两个框架)可以在这里找到。此外,你现在可以找到延迟加载 AngularJS 想法,基于前面提到动态 ECMAScript 导入。

3K30

Angular2 之 结构型指令几个概念

NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。 注意:这里出现或者消失,并不是隐藏。 隐藏元素利弊 当我们隐藏元素,组件行为还在继续。...仍然附加子啊它所属于DOM元素上,仍然监听事件。angular会继续检查哪些能影响数据绑定变更。组件原本要做哪些事情仍然进行!它还是占用着那么多资源。...Angular应用之外,标签默认CSS属性displaynone 。 内容存在于一个隐藏文档片段。...渲染器ViewContainerRef。 * 我们把它们都作为私有变量注入到构造函数。...要么显示包含在Template标签,要么隐式使用*这种语法糖去包装在Template标签简化了ngIf和ngFor —— 无论还是读。

3K20

Angular ElementRef 简介

因为 web worker 环境不能直接操作 DOM。...通过 ElementRef 我们就可以封装不同平台下视图层 native 元素 (浏览器环境,native 元素通常是指 DOM 元素),最后借助于 Angular 提供强大依赖注入特性,我们就可以轻松地访问到...没有抛出异常,我们可以推断 this.elementRef.nativeElement 这个对象是存在,但却找不到子元素,那应该是调用构造函数时候,my-app 元素下子元素还未创建。...[2] 这个演讲示例。 问题解决了,但感觉不是很优雅 ?有没有更好方案,答案肯定。Angular 不是有提供组件生命周期钩子,我们可以选择一个合适时机,然后获取我们想要 div 元素。...我们看到设置 div 元素背景,我们默认应用运行环境浏览器。前面已经介绍了,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

1.6K60

AngularDart4.0 指南- 模板语法二 顶

Angular你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以一个简单绑定时为什么要创建一个指令来处理点击呢?...别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值方法。 在这个例子,这个值就是英雄ID。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道一个很好选择。 管道简单函数接受一个输入值并返回一个转换后值。...不幸,当currentHero为,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!...想象一下,诸如a.b.c.d这样长属性路径某个地方防止值。 Angular安全导航操作符(?.)一种更为流畅和方便方法来防止属性路径中出现。表达式达到第一个值时会被释放。

29.9K20

Angular8稳定版修改概述

它不是完全正常运行(选择预览),正如Igor MinarngConf 2019建议那样,视图引擎仍然推荐用于新应用。...我认为这是gulp/grunt“旧时代”命令。 基本上,构建器只是一个带有一组命令函数,您可以createBuilder()从@angular-devkit/architect包传递给方法。...一项改进SwRegistrationOptions增加了选项。 一个域中支持多个应用。 阅读Angular Doc上有关服务工作者更多信息。...从现在已从包列表删除。 配置ViewChild / ContentChild查询时间 使用此功能,必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。...它们将在变更检测运行后解析。 需要注意,设置static: true将不允许您从动态模板分辨率(例如*ngIf)获得结果。 添加了原理图支持以将现有代码迁移到此语法,因为将使用此语法Ivy 。

4.5K20

AngularDart 4.0 高级-结构指令 顶

只要*ngIf设置为一个字符串。 您将在本指南中学习到星号(*)一种便利符号,字符串一种微型语法,而不是通常模板表达式。...当条件为falseNgIfDOM删除宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁。 组件和DOM节点可以被垃圾收集并释放内存。...当你编写自己结构指令可以使用这些微观语法机制。 研究NgIf和NgFor源代码了解更多信息方法。 模板输入变量 模板输入变量一个变量,其值可以模板单个实例引用。...您仅可以一个结构指令应用于宿主元素。 原因简单。 结构指令可以用宿主元素及其后代完成复杂事情。 当两个指令声明相同宿主元素,哪一个优先? NgIf或NgFor应该先走哪一个?...满足Angular模板类似需求。 编写一个结构指令 本节,您将编写一个NgIf相反UnlessDirective结构指令。 NgIf条件为true显示模板内容。

16K20

AngularDart4.0 指南-体系结构概述 顶

这是告诉Angular这个组件构造函数需要HeroService一种方法,这样它就可以获得显示英雄列表。 ? @Component元数据告诉Angular从哪里获取为组件指定主要构建块。...当用户点击英雄名字,(click)事件绑定调用组件selectHero方法。 双向数据绑定是一个重要第四种形式,使用ngModel指令将属性和事件绑定在一个符号。...当Angular呈现它们根据指令给出指示转换DOM。 指令一个带有@Directive注解类。...依赖注入一种提供一个新实例方法需要完整依赖关系。 大多数依赖服务。 Angular使用依赖注入来为新组件提供他们需要服务。...如果请求服务实例不在容器,那么将服务返回给Angular之前,注入器将创建一个并将其添加到容器。 当所有请求服务已经解析并返回,Angular可以用这些服务作为参数调用组件构造函数

7.9K30

AngularDart4.0 指南- 显示数据 顶

当这些属性改变,Angular会更新显示。 更准确地说,重新显示与视图相关某种异步事件之后发生,例如按键,计时器完成或对HTTP请求响应。...现在运行应用程序。 应该显示标题和英雄名字: ? 模板内嵌或模板文件? 您可以将组件模板存储两个地方之一。...内嵌和单独HTML之间选择一个品味,环境和组织政策问题。 这里应用程序使用内联HTML,因为模板很小,演示更简单,没有额外HTML文件。...双引号内模板表达式,* ngIf =“heros.length> 3”,看上去和表现很像Dart。 当组件英雄列表中有三个以上项目,Angular会将该段落添加到DOM,并显示消息。...正在添加和删除DOM段落元素。 这可以提高性能,特别是大型项目中,当有条件地包含或排除大量HTML与许多数据绑定。 试试看。 由于列表中有四个项目,所以应该显示消息。

5.3K10

angular面试题及答案_angular面试

生命周期钩子 生命周期顺序,见下图: ngOnChanges:当组件数据绑定输入属性发生变化触发,该方法接收一个SimpleChanges对象,包括当前值和上一个属性值。...,而directive用来已经存在DOM元素上实现一些行为 component可重复使用组件,directive可重复使用行为 component可创建一个view,即template或templateUrl...此功能用于更改模板上输出;比如将字符串更改为大写并在模板上显示。它还可以相应地更改日期格式。...— 一个函数 — 接受一个Observer对象(包含next、error、complete方法对象)作为参数 — 返回 unsubscribe 函数,...ViewChild 用来从模板视图中获取匹配元素 父组件 ngAfterContentInit 生命周期钩子才能成功获取通过 ContentChild 查询元素 父组件

10.9K120

Angular核心-父子间组件传递数据-重难点

Angular核心-父子间组件传递数据-重难点 方向一:父=》子传递数据 方向二:子=》父 父子组件传递数据简便方法: Vue.js和Angular父子间消息传递原理一样,都可以用口诀:“Props...//得使用装饰器装饰一下 //装饰器要紧挨着要装饰输入型属性 //并且一个装饰器只能管一个 //有很多输入型属性就必须多个装饰器 @Input()//声明为“输入型属性”.../core'; //造一个事件发射器 //输出型属性,可以向父组件输出数据 @Output() private cryEvent = new EventEmitter() 一个事件发射数据...提示:ViewChild装饰器用于将子组件识别符与某个属性关联起来,第一个参数必须已经存在子组件识别符(不带#),第二个参数static指定该组件是否为“静态组件”—不会有时有时无组件(比如ngIf...,ngFor) 注意: 通过“ViewChild”-视图组件方式,父组件可以获得任意子组件数据,在一定程度上违反了“最少知识法则” 我博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https

1.2K20

反思录:Angular实现svg和png图片下载

我经常思考,面临一个不确定问题,以往经验究竟有无辅助作用?如果把经验遗忘会产生何种程度影响?在上下求索未果之后,如何找回曾经感觉,恰若灵光一现?...>一个自定义component,代表了一个svg文件,svg内容存放在template.component.thml,而template.component.ts...获取元素 Angular中提供一种叫做ViewChild注解,可以帮助我们引用到页面svg元素,此处就是#template....图片转换 有了svg元素,接下来需要考虑如何对其编程。svg和html浏览器内存中都是以DOM形式存在,所以想要对svg进行编程,就得利用svgDOM interface....然而这一步其实完全没必要,原因在于这些变量都是编辑器辅助补全。 紧接着,我toBlob方法插入了console.log(this.sanitizer),运行后打印结果undefined。

2.7K40
领券