按类划分Angular2组件:：ViewChild / ContentChild

Angular2组件按类划分主要包括ViewChild和ContentChild。

ViewChild: ViewChild是Angular中的装饰器，用于获取对模板中子组件、指令或DOM元素的引用。它可以通过在组件类中声明一个属性，并使用ViewChild装饰器来获取对应的引用。

优势：

可以在父组件中直接访问子组件、指令或DOM元素的属性和方法。
可以在父组件中动态修改子组件、指令或DOM元素的状态。

应用场景：

当需要在父组件中操作子组件、指令或DOM元素时，可以使用ViewChild来获取对应的引用。
当需要在父组件中动态修改子组件、指令或DOM元素的状态时，可以使用ViewChild来获取对应的引用。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云提供了云服务器CVM（https://cloud.tencent.com/product/cvm）和云函数SCF（https://cloud.tencent.com/product/scf）等产品，可以用于支持Angular2组件的部署和运行。

ContentChild: ContentChild也是Angular中的装饰器，用于获取对模板中内容投影的引用。它可以通过在组件类中声明一个属性，并使用ContentChild装饰器来获取对应的引用。

优势：

可以在父组件中访问被投影的内容，并进行操作。
可以在父组件中动态修改被投影的内容。

应用场景：

当需要在父组件中访问被投影的内容，并进行操作时，可以使用ContentChild来获取对应的引用。
当需要在父组件中动态修改被投影的内容时，可以使用ContentChild来获取对应的引用。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云提供了云数据库MySQL版（https://cloud.tencent.com/product/cdb_mysql）和云存储COS（https://cloud.tencent.com/product/cos）等产品，可以用于支持Angular2组件中的数据存储和内容管理。

相关·内容

高级 Angular 组件模式 (2)

: 根据父组件的开关状态，渲染当状态为关时的内容组件可以实现@ContentChild装饰器获取这三个子组件的引用，从而可以根据开关状态的变化调整它们之间的关联逻辑。...相关话题 @ContentChild装饰器将会返回在组件标签包含的内容中，第一个符合选择器的子组件或者子指令的引用，比如 This is the content 。...如果想获取所有的子组件或者子指令，使用@ContentChildren。 @ViewChild或者@ViewChildren装饰器是用来获取在组件内部模板中使用的单个或者多个组件的。...以上的需求完全是可以在内部实现的，但是这样会使它的内部充满逻辑代码，反之我们可以将一些职能划分为成更小的碎片，并委托到它的子组件中，本身作为容器组件存在，负责协作子组件从而达到目的。...对于@ContentChild和@ViewChild的使用场景，我认为通过看装饰器前缀的寓意是最后的方式。

8413 0

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

生命周期序列通过调用其构造函数创建组件/指令后，Angular在特定时刻按以下顺序调用生命周期钩子方法：钩子作用和时机 ngOnChanges Angular（重新）设置数据绑定输入属性时响应。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?...(ChildViewComponent) ChildViewComponent viewChild; ngAfterViewInit() { // viewChild is set after...以下AfterContent挂钩根据内容子代(只能通过使用@ContentChild注解的属性查询它)中的值进行更改。...(ChildComponent) ChildComponent contentChild; ngAfterContentInit() { // contentChild is set

6.2K1 0

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

---- 前言这一篇我们带来的是关于组件基础使用的最后一块,内容投影和Vue中的插槽很类似,在组件封装的时候非常有用,我们一起来体验一下。正文 1....投影多块内容/组件容器组件这样写使用标签锁定投影位置使用class锁定投影位置用自定义组件名称锁定投影位置使用自定义属性锁定投影位置编号2 <ng-content select...~ export class PageContainerComponent implements OnInit { expanded: boolean = false; @ContentChild...@ContentChild & @ContentChildren 使用这两个装饰器来对被投影的组件进行操作使用注解在业务组件中定义被投影的组件 @ContentChild(HelloWorldComp...@ViewChild & @ViewChildren 使用这两个装饰器来对指接子组件进行操作使用注解在业务组件中定义子组件 @ViewChild(HelloWorldComp) helloComp

5473 0

Angular ViewChild和ViewChildren

ViewChildren 与 ContentChild 装饰器类似，ViewChild 装饰器也有与之对应的 ViewChildren 装饰。...item.checked.subscribe((checked: boolean) => this.showMessage = checked); }); } } } 更新完对应的模板，我们也需要同步更新组件类...组件，ViewChild 装饰器除了支持 Type 类型参数外，还支持字符串参数，而字符串的值是模板引用的值。... 邮箱接下来更新 AuthFormComponent 组件类...如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。

2.7K2 0

angular面试题及答案_angular面试

指令分类组件：用于构建UI组件，继承于Directive类属性指令：用于改变组件的外观或行为 ngClass ngStyle 结构指令：用于动态添加或删除DOM元素来改变DOM布局 ngIf ngFor...组件和指令的区别 component使用注解@Component修饰，directive使用注解@Directive修饰 component是组件化思想，基于组件创建应用，把应用划分成细小的可重复利用的组件...module声明了哪些模块可以被其他模块使用，依赖注入了哪些类，以及启动的component，模块来管理组件，使app实现模块化。 21. 怎样在组件中选择一个元素？...ContentChild 与 ViewChild 的异同点相同点都是属性装饰器都有对应的复数形式装饰器：ContentChildren、ViewChildren 都支持 Type...ViewChild 用来从模板视图中获取匹配的元素在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素在父组件的

11.1K12 0

Angular ElementRef 简介

如定义了抽象类 Renderer 、抽象类 RootRenderer 等。...有兴趣的读者，可以阅读一下 [Web Workers 中支持的类和方法][1] 这篇文章。...Angular 不是有提供组件生命周期的钩子，我们可以选择一个合适的时机，然后获取我们想要的 div 元素。...不过我们后面也会有专门的文章，详细分析一下 Angular 组件的生命周期。成功取到 div 元素，就剩下的事情就好办了，直接通过 style 对象设置元素的背景颜色。...其实在 Angular 框架内部已经为我们提供了解决方案，它为我们提供了内置的装饰器，如 @ContentChild、 @ContentChildren、@ViewChild、@ViewChildren

1.6K6 0

高级 Vue 组件模式 (5)

05 使用 $refs 访问子组件引用目标在之前的文章中，详细阐述了子组件获取父组件所提供属性及方法的一些解决方案，如果我们想在父组件之中访问子组件的一些方法和属性怎么办呢？...设想以下一个场景：当前的 custom-button 组件中，有一个 input 元素我们期望当 toggle 的开关状态为开时，显示 input 元素并自动获得焦点这里要想完成目标，需要获取某个组件或者每个元素的引用...，在不同的 mvvm 框架中，都提供了相关特性来完成这一点： angularjs: 可以使用依赖注入的 $element 服务 Angular: 可以使用 ViewChild、ContentChild...messages"> 注意这里的 ref="input"，这样在组件内部，可以通过 this....="toggle"> 之后修改 onToggle 方法中的逻辑以满足目标中的需求，当 toggle 组件状态为开时，调用 custom-button 组件的 focus

5651 0

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

你可以通过查看它的类和函数来进行判断：它们以特殊字符 ɵ 开头。...Worker 类被应用于 using 组件来与此 worker 脚本交互： 1const count = parseInt(this.count, 10); 2 3const worker = new.../lazy/lazy.module#LayzModule' 4} “#”号之前的值表示通向模块实现的文件的路径；之后的值代表其中包含的类。...ViewChild 和 ContentChild 中的重大变化 ViewChild 和 ContentChild 的使用方式发生了重大变化，但遗憾的是，过去并不总是表现出一致的行为。...由于这种行为十分令人困惑，所以现在组件必须指定何时应该进行解决： 1@ViewChild('info', { static: false }) 2 paragraph: ElementRef; 如果

3K3 0

Angular DOM 抽象概述

如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...有兴趣的读者，可以阅读 Web Workers 中支持的类和方法这篇文章。因此引入 ElementRef 类主要目的是为了实现跨平台。...，不能直接实例化抽象类，只能实例化该抽象类的子类) 作用利用 TemplateRef 实例，我们可以灵活地创建内嵌视图。...动态创建组件的流程如下：获取装载动态组件的容器在组件类的构造函数中，注入 ComponentFactoryResolver 对象调用 ComponentFactoryResolver 对象的 resolveComponentFactory...实际工作中，还需要利用 ViewChild、ViewChildren、ContentChild 和 ContentChildren 装饰器，或者基于 Angular 依赖注入特性，通过构造注入的方式，获取相关的对象

3.5K3 0

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

所有的组件，除了根组件，你都可以看到类定义是这样的： export class Something { } 非常简单，我们 expoet 组件就是为了能够在其他地方 import。...我们从Angular 2导入 Component 和 ViewChild 。 Component 几乎无处不在，因为我们用于创建组件， ViewChild 用于获取组件中元素的定义。...在这个类里面的任何地方访问它们。...通常，我们导入NavController 使用与 MenuController 和Platform 同样的方式然后调用它的 setRoot，但是你不能从根组件调用它，作为替换我们获取引用通过Angular2...提供的@ViewChild。

4.4K5 0

Angular开发实践（七）：跨平台操作DOM及渲染器Renderer2

比如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...通过模板变量、@ViewChild 等方法获取DOM元素。...为了演示，先定义一个组件DemoComponent： import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from...@ViewChild @ViewChild('demoDiv') demoDiv: ElementRef; // @ViewChild通过模板变量名获取 ngAfterViewInit() {...console.log('DIV的id：' + this.demoDiv.nativeElement.id); // DIV的id：demoDiv } 在组件类中，我们通过 @ViewChild 获取到包装有

2.6K9 0

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

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

2.1K2 0

angular框架如何实现父子组件传值、非父子组件传值

文章目录 1.理解父子组件、非父子组件 2.父组件给子组件传值- -@input 3.父组件通过@ViewChild主动获取子组件的数据和方法 4.非父子组件如何传递数据 1.理解父子组件、非父子组件...implements OnInit{ @Input msg:string } 即在组件的类中用Input修饰符接收数据以上三步就完成了父组件给子组件传递数据。...3.父组件通过@ViewChild主动获取子组件的数据和方法在angular也提供了一个@Output修饰器来实现子组件给父组件传值，但是这个方法是较复杂的，我们使用另一种@ViewChild方法来实现...调用子组件，给子组件定义一个名称 #号后面加一个变量名，组成模板变量在父组件中引入viewChild： import {...第二步：在子组件定义好数据第三步：在父组件使用viewChild接收子组件数据第四步：这时可以在父组件的ts文件或模板文件中使用子组件所有数据或方法注意：可以在父组件通过

1.6K2 0

AngularJS2.0 教程系列（一）

在这里，我们从angular2模块库中引入了三个类型： Component类、View类和bootstrap函数。 2....实现一个Angular2组件实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解： @Component({selector:"ez-app"}) @View({template:"...Hello,Angular2"}) class EzApp{} class也是ES6的关键字，用来定义一个类。...渲染组件到DOM 将组件渲染到DOM上，需要使用自举/bootstrap函数： bootstrap(EzApp); 这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。...而在Angular2中，bootstrap是围绕组件开始的，你定义一个组件，然后启动它。如果没有一个组件，你甚至都没有办法使用Angular2！

2.4K1 0

Angular 动态创建组件

该 ComponentFactoryResolver 服务对象中，提供了一个很重要的方法 —— resolveComponentFactory() ，该方法接收一个组件类作为参数，并返回 ComponentFactory...) {} 接下来我们再来看一下 ComponentFactory 抽象类： export abstract class ComponentFactory { abstract get selector...: NgModuleRef): ComponentRef; } 通过观察 ComponentFactory 抽象类，我们知道可以通过调用 ComponentFactory 实例的 create...在组件类的构造函数中，注入 ComponentFactoryResolver 对象。... ` }) 更新 AppComponent 组件类，新增 alertComponent

3.7K1 0

ElementRef & TemplateRef & ViewContainerRef

今天在做ng项目，看着前人的代码有 viewChild() 等关键字。... ` }) export class AppComponent(){ @ViewChild('greet') greetDiv: ElementRef...abstract createEmbeddedView(context: C): EmbeddedViewRef; } templateRef 下面有个抽象方法，不能直接实例化抽象类应该实例抽象化类的子类...需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。 ViewContainerRef：用于表示一个视图容器，可添加一个或多个视图。...简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

1.2K2 0

Angular开发实践（四）：组件之间的交互

子组件获取父组件实例相比于父组件获取子组件实例（直接通过模板变量、@ViewChild或@ViewChildren获取）要麻烦一些。...一个组件可能是多个组件的子组件，有时候无法直接知道父组件的类型，在Angular中，可通过类—接口（Class-Interface）的方式来查找，即让父组件通过提供一个与类—接口标识同名的别名来协助查找...-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！...当父组件类需要这种访问时，可以把子组件作为 ViewChild，注入到父组件里面。...在上面定义好的子组件和父组件，我们可以看到：父组件在组件类中通过@ViewChild()获取到子组件的实例，然后就可以在模板或者组件类中通过该实例获取子组件的属性： <!

3.4K8 0

angular知识点梳理第三篇-组件

this的传递【parent.component.html】在子组件中进行@Input进行接收即可【children.component.html】子组件传值(函数)给父组件方案一通过viewchild...：在父组件的ts文件中引入viewchild模块【parent.component.ts】方案二：通过@Output触发父组件的方法第一步：在子组件ts文件中引入angular的核心模块中的output...一个用于定义行为的 Typescript 类一个 CSS 选择器，用于定义组件在模板中的使用方式 vue因为是模版化比较严重的框架，所以vue本身一个vue文件就可以写完一个组件，这点是需要注意的...子组件传值(函数)给父组件方案一通过viewchild进行节点获取第一步：在父组件引入子组件的地方添加节点值【parent.component.html】 <!...模块【parent.component.ts】 // 引入angular核心模块的viewchild模块 import { Component, OnInit,ViewChild } from '@angular

2.2K1 0

ng-content 中隐藏的内容

，组件类中的 id 属性用于显示本组件被实例化的次数。...ngProjectAs 有时你的内部组件会被隐藏在另一个更大的组件中。有时你只需要将其包装在额外的容器中即可应用 ngIf 或 ngSwitch。...我们需要使用 @ContentChild 访问模板，并使用ngTemplateOutlet 来显示它： @Component({ selector: 'wrapper', template: `...ng-container [ngTemplateOutlet]="template"> ` }) class Wrapper { show = true; @ContentChild...ngTemplateOutlet]="template"> ` }) class Wrapper { items = [0, 0, 0]; @ContentChild

2.7K3 0

Angular2 VS Angular4 深度对比：特性、性能

这个Angular版本更加注重于开发移动应用程序，开发人员可以使用它创建跨平台的应用程序，在解决了移动应用程序（功能，加载时间等）的挑战后，Angular2可以更容易的处理桌面组件。...许多模块被淘汰出了Angular核心，这也促使Angular2具备更好的性能。Angular走向了不断增长的模块生态系统，这意味着开发者可以自由的选择所需的组件。...通过在DI库中提供基本信息（可以调用函数或创建类的实例来检查相关元数据），从而简化了对象实例的构建。通过提供注入注释，使得参数信息重写也变得简单。...由于代码依赖于ES6模块，因此模块加载程序将通过在部分组件上引用它们，来加载依赖关系。...指令： Angular2提供了三种指令：组件指令：通过将逻辑封装在HTML，CSS和JavaScript中，从而使得组件可复用。

8.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云