angular之viewChild和viewChildren

简介: angular之viewChild和viewChildren

属性选择器,用来从模板视图上获取匹配的元素。可以在ngAfterViewInit中获取到查询的元素。
格式:

ViewChild(selector:string|Function|Type,opts?:{
   read?:any;static?:boolean}):any

1:元数据属性
selector:
用于查询指令类型或名字。

read:
告诉viewChild返回什么类型的数据,取值可以是ElementRef,TemplateRef,Component,ViewContainerRef等。

static:
默认为false,如果值为false,则是在变更检测之后解析查询结果,值为true,是在变更检测之前解析。

2:常见用法
1:同一个组件,一般不直接使用原生方法操作dom,可以借助viewChild:

<div #divDemo>abc</div>
@ViewChild('divDemo',{
   read:ElementRef}) divDemo!:ElementRef;
ngAfterViewInit(){
   
    divDemo.nativeElement.style.color = 'red';
}

2:父子组件,当我们需要获取子组件的值和方法的时候
有两种形式:一种是使用放置锚点的方法,一种是引入子组件。
2.1:放置锚点

//子组件test-child.ts
title='初始化的title值';
changeTitle():void {
   
  this.title = '改变了title';
}
//父组件app.html
<app-test-child #testChild></app-test-child>
<button (click)="changeChildTitle()">改变子组件的title值</button>
//父组件app.ts
@ViewChild('testChild')testChild!:any;
changeChildTitle():void {
   
    this.testChild.changeTitle();
}

2.2:引入子组件

import {
    TestChildComponent } from './test-child/test-child.component';
@ViewChild(TestChildComponent) testChild!:TestChildComponent;

3:问题
报ExpressionChangedAfterItHasBeenCheckedError错误,需要设置static:true

//父组件
<p>{
   {
   testChild.title}}</p>
//报错
//ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'..

{ static: true } 其实就是静态查询,在ngOnInit中可用。
{ static:false } 其实就是动态查询,一般结合*ngIf使用。

viewChildren和viewChild类似,但没有static选项。
返回一个QueryList集合。

<div #divDemo>123</div> 
<div #divDemo>456</div>
@ViewChildren ('divDemo') divDemo!:QueryList<ElementRef>;
ngAfterViewInit(){
   
  this.divDemo.forEach(ele=>{
   
    console.log(ele);
  })
}
相关文章
|
2月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
23 0
|
XML 设计模式 前端开发
Angular 2 中的 ViewChildren 和 ContentChildren
原文地址:http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/ 在这篇文章中,我将解释在Angular 2中view children和content children之间的区别,我们将看看如何从父组件来访问这两种不同的children,除了这些内容,我们也将提到在@Component 装饰器中提供的属性providers和viewProviders之间的区别。
1227 0
|
20天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
36 0
|
2月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
37 0
|
2月前
|
开发者 Java 开发框架
JSF与EJB,打造企业级应用的神器!让你的Web应用更加稳定、高效!
【8月更文挑战第31天】在现代企业级应用开发中,JSF(JavaServer Faces)与EJB(Enterprise JavaBeans)是两大核心技术。JSF作为一款基于Java的Web应用框架,以其丰富的UI组件和表单处理功能著称;EJB则专注于提供分布式事务处理及远程调用等企业级服务。两者的结合为企业应用带来了高效便捷的开发模式。下文将通过一个简单的示例展示如何利用JSF进行用户信息的输入与保存,并借助EJB实现相关业务逻辑。尽管这一组合具有明显优势,但在实际应用中还需考虑其局限性并作出合理选择。
42 0
|
2月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
39 0
|
2月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
47 0
|
2月前
|
开发者 Windows Android开发
跨平台开发新选择:揭秘Uno Platform与.NET MAUI优劣对比,帮你找到最适合的框架,告别选择困难症!
【8月更文挑战第31天】本文对比了备受关注的跨平台开发框架Uno Platform与.NET MAUI的特点、优势及适用场景。Uno Platform基于WebAssembly和WebGL技术,支持Windows、iOS、Android及Web平台,而.NET MAUI由微软推出,旨在统一多种UI框架,支持Windows、iOS和Android。两者均采用C#和XAML进行开发,但在性能、平台支持及社区生态方面存在差异。Uno Platform在Web应用方面表现出色,但性能略逊于原生应用;.NET MAUI则接近原生性能,但不支持Web平台。开发者应根据具体需求选择合适的框架。
62 0
|
2月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
37 0