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

在Angular 7中,当在*ngIf中使用时,ViewChild未定义

在Angular 7中,当在ngIf中使用ViewChild时,可能会导致ViewChild未定义的问题。这是因为ngIf指令会根据条件动态创建或销毁DOM元素,而ViewChild是在组件初始化时进行查询的。当*ngIf条件为false时,ViewChild查询的元素将不存在,因此会导致ViewChild未定义。

解决这个问题的方法是使用ngAfterViewInit生命周期钩子来延迟查询ViewChild。ngAfterViewInit会在组件视图初始化完成后被调用,此时DOM元素已经创建完毕,可以安全地进行ViewChild查询。

以下是解决方案的示例代码:

代码语言:txt
复制
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 {
  condition = true;
  @ViewChild('myElement') myElement: ElementRef;

  ngAfterViewInit() {
    console.log(this.myElement); // ViewChild is defined here
  }
}

在上述示例中,我们将ViewChild查询放在ngAfterViewInit生命周期钩子中,确保在视图初始化完成后进行查询。这样即使在*ngIf条件为false时,ViewChild仍然能够正确地获取到元素。

对于Angular 7中的*ngIf和ViewChild的更多详细信息,您可以参考腾讯云的Angular文档:Angular 文档

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

相关·内容

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

在这种情况下,不建议使用 ng-content 元素,因为只要组件的使用者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部,该内容也总会被初始化...在显式渲染 ng-template 元素之前,Angular 不会初始化该元素的内容。...通过内置的动态指令*ngIf来控制是否渲染投影。...: ContentDirective; } 通过日志可以看到我们在切换容器组件的expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然在页面看不到渲染的内容,但组件实实在在被初始化过了...@ViewChild & @ViewChildren 使用这两个装饰器来对指接子组件进行操作 使用注解在业务组件中定义子组件 @ViewChild(HelloWorldComp) helloComp

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

    在Angular摧毁指令/组件之前调用。 其他生命周期挂钩 其他Angular子系统除了这些组件钩子可能有自己的生命周期钩子。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数中获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...在ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。 它只调用一次ngOnInit。 您可以期待Angular在创建组件后立即调用ngOnInit方法。...(ChildViewComponent) ChildViewComponent viewChild; ngAfterViewInit() { // viewChild is set after...回想一下,在调用AfterView钩子之前,Angular调用了AfterContent的两个钩子。 在完成该组件的视图之前,Angular会完成投影内容的组合。

    6.2K10

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

    ="expr">NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示在页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...通过在模板表达式中使用管道运算符(|)则可以完成相应的结果转换 4.3.1、模板表达式中的特殊运算符 angular 模板表达式是 javascript 的子集,相对于常见的 javascript 运算符...安全导航运算符 在视图中使用的属性值为 null or undefined 时,javascript 和 angular 会引发空指针异常并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...4.4.3、父组件获取子组件信息 使用 @ViewChild 装饰器获取 在子组件上定义一个模板引用变量 父组件内容: 1、使用 @ViewChild 装饰器获取子组件数据...在组件中使用服务 在需要使用的组件中引入服务,然后在组件的构造函数中通过依赖注入的方式注入这个服务,就可以在组件中完成对于这个服务的使用 在父组件中对数据进行赋值,然后调用服务的方法改变数据信息

    15.8K30

    Angular8稳定版修改概述

    project set enableIvyoption in the angularCompilerOptions in your project’s tsconfig.app.json 要在现有项目中使用...Bazel可作为选择加入,预计将包含@angular/cli在第9版中。...Bazel将提供以下优势: 更快的构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经在使用它,现在CI在7.5分钟内完成,而不是在Bazel之前的60分钟。...配置ViewChild / ContentChild查询的时间 使用此功能时,必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。...需要注意的是,设置static: true将不允许您从动态模板分辨率(例如*ngIf)获得结果。 添加了原理图支持以将现有代码迁移到此语法,因为将使用此语法Ivy 。

    4.5K20

    Angular ViewChild和ViewChildren

    ViewChild Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配的元素。ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。...视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,就能正常获取查询的元素。...ngIf="showMessage"> 保持登录30天 基于上面的模板,我们可以简单的创建一个 AuthMessageComponent 组件: import { Component...Viewchild 和 ElementRef 在 ViewChild 小节,我们使用 @ViewChild(AuthMessageComponent) 装饰器来获取 AuthMessageComponent...装饰器来获取邮箱输入框的元素引用: @ViewChild('email') email: ElementRef; 最后在 ngAfterViewInit 生命周期钩子中输出 email 属性的值: ngAfterViewInit

    2.7K20

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

    (达内教育学习笔记)仅供学习交流 Angular核心-父子间组件传递-重难点 Angular核心-父子间组件传递数据-重难点方向一:父=》子传递数据方向二:子=》父父子组件传递数据的简便方法:...Angular核心-父子间组件传递数据-重难点 方向一:父=》子传递数据 方向二:子=》父 父子组件传递数据的简便方法: Vue.js和Angular中的父子间消息传递原理一样,都可以用口诀:“Props... //$even是用于接收子组件发射的数据 在ts...文件里: @ViewChild('c0',{static:true})//这个c0表示组件c1 private c0: any;//这个c0是自己起的名字,与组件c0绑定 @ViewChild(...static指定该组件是否为“静态组件”—不会有时有时无的组件(比如ngIf,ngFor) 注意: 通过“ViewChild”-视图组件方式,父组件可以获得任意子组件中的数据,在一定程度上违反了“最少知识法则

    1.2K20

    Angular 从入坑到挖坑 - 表单控件概览

    在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...,一个 FormControl 类的实例对应于一个表单控件,在使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的值和状态 import { Component, OnInit...FormControl 实例 public name = new FormControl(''); constructor() { } ngOnInit(): void { } } 当在组件中创建好控件实例后...当构建复杂表单时,可以在 FormGroup 中通过嵌套 FormGroup 使表单的结构更合理 import { Component, OnInit } from '@angular/core';

    18.9K20

    angular面试题及答案_angular面试

    指令分类 组件:用于构建UI组件,继承于Directive类 属性指令:用于改变组件的外观或行为 ngClass ngStyle 结构指令:用于动态添加或删除DOM元素来改变DOM布局 ngIf ngFor...父子组件之间的数据传递 @Input 父组件向子组件传递数据和传递方法(子组件中使用) @output 子组件传值给父组件 (事件传递的方式)(子组件中使用) //子组件中使用事件发射器 @output...在Angular中有三种方法可以做到这一点: Emulated : 样式从其他HTML传播到组件。 Native : 来自其他HTML的样式不会传播到组件。...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...生命周期钩子中才能成功获取通过 ViewChild 查询的元素 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

    11.3K120

    ionic3使用带图标带事件的toast

    /animations --save 添加样式 Github文档是通过修改angular-cli.json文件来导入样式的,而对于ionic来说,该类似文件封装在源码里面,不应该修改,所以改为在index.html...providers: [], bootstrap: [AppComponent], }) export class AppModule {} 调用: import { Component, OnInit, ViewChild...>Click `, }) export class AppComponent implements OnInit { @ViewChild...还是会检测toastr-bs4-alert.scss里面的样式,爆出: @include border-radius($alert-border-radius);中$alert-border-radius未定义的错误...无论想不想用bootstrap,在调用toastr-bs4-alert.scss前,先类似导入如下两个模块,它说导入完编译后就会没有了,见截图说明(我不明白为啥导入后反而没有,黑人问号脸): @import

    3K20

    Angular 中结构指令模式 - 它们是什么且怎么使用

    在 Angular 中,有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大的特性之一,然而它们却频繁被误解。...如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式的知识点。...学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构的指令。这些指令可以添加、移除或者替换元素。...在 Angular 中,有三种标准的结构化指令。...ngIf="worker" class="name">{{worker.name}} Angular 生成一个 的元素,然后应用 *ngIf 指令。

    3.8K20

    过渡到 Angular 17 的新控制流语法

    传统指令与Angular 17的控制流语法对比让我们使用一些示例来比较传统指令和Angular 17的控制流语法:*ngIf指令 vs @if控制块Before(传统 *ngIf):ngIf.../src/component-to-be-migrated转义 {、} 和 @ 字符:在模板中,现有的 {、} 和 @ 字符作为文本字符使用时需要进行转义。...例如,在某些情况下,您可以使用 @defer 块来延迟加载内容。向后兼容性和性能Angular 17允许您在应用程序中同时使用新旧语法。...结论Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法,承诺会使我们的代码更易读、易维护和高性能。...正如我们在自己的项目中所经历的,这些变化不仅是外观上的改变,而且是功能上的改变,提升了我们使用Angular的方式。我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

    72620

    【译】Angular中,向子组件传值的5种方式

    本文,让我们跟随 accompanying demo app  的示例来阐述下面5个技术: @Input来响应变化的值 @ViewChild来设置属性 在services中使用BehaviorSubjects...使用Angular Router 使用NgRx 我会从最基本的开始,最后整个会变得很复杂。...ViewChild 使用ViewChild,你可以操作子组件内的属性以及方法。在动态插入组件或元素时,你可以通过子组件的类或模板引用变量的方式,来直接引用子组件,这技术就会得心应手。...要使用ViewChild,需要传入子组件的类或是模板引用变量,这样在父组件内轻易的得到属性指向子组件。...这个声明只会查询组件内第一个PriceComponent的实例: @ViewChild(PriceComponent) priceComponent; 如果你的模板中使用引用变量: <app-price-component

    2.1K20
    领券