按类划分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组件中的数据存储和内容管理。
相关·内容
我正在尝试从子组件的父组件获取ElementRef。
@Component({
moduleId: module.id,
selector: 'parent',
templateUrl: 'parent.component.html',
directives: [
Child1Component,
Child2Component
]
})
在Child1Component的html中，我有
<button class="btn btn-primary" #myRef>Select File</button>
浏览 6提问于2016-05-20得票数 4
我在其他组件中使用了一个item组件，item组件通常如下所示：
<item type="the-type" text="the-text"></item>
定义如下：
@Component(
selector: 'item',
template: '...')
class Item {
@Input() String text = "text-goes-here";
@Input() String type = "type-goes-her
浏览 0提问于2016-06-04得票数 3
回答已采纳
1回答
扩展Angular2指令
、、、
我试图扩展天使2剪贴板npm包。我需要访问它的ngOnInit()函数并覆盖它，以适应复制的特定用例。
我是angular2的新手，不知道该怎么做，到目前为止我一直在尝试的方式是链接在下面的柱塞中。我遇到了困难，因为包是作为一个名为ClipboardModule的模块导出的，我需要这个指令。
下面是插件github和柱塞以供参考：
Github：
显示导出的文件是src/clipboard.module.ts。
他们的github也有一个连接到柱塞的例子，它工作。
我的柱塞：
浏览 4提问于2016-10-27得票数 0
我已经创建了一个主要组件，试图在其中呈现content projection组件，该组件定义了用于内容投影的ng-content区域。当我试图使用ContentChild装饰器访问它时，它给出了undefined。
appComponent.ts代码：
import { Component, ViewChild, AfterViewInit, ContentChild, AfterContentInit } from '@angular/core';
import { FirstChildComponent } from './first-child/first-chi
浏览 11提问于2018-08-31得票数 1
我能够投影内容，但无法获得相同的引用。
我尝试使用#SelectorName，也尝试在ContentChild()和ContentChildren()中使用组件名。不知何故，尽管调用了ngAfterViewInit钩子，我还是无法获得引用。
更新的插画: viewchild，viewchild，contentchild，contentChildren :
浏览 0提问于2019-04-11得票数 0
回答已采纳
Angular 2提供了@ViewChild、@ViewChildren、@ContentChild和@ContentChildren装饰器来查询组件的后代元素。
前两个和后两个有什么不同？
浏览 86提问于2015-12-17得票数 235
回答已采纳
我正在学习Angular 5 Projects一书中的教程，并对其中一个练习有一个问题。
我不知道为什么必须实例化contentChild变量，以及如何在代码中使用它。
ContentChild(CardComponent) contentChild: CardComponent;
有人能解释一下吗？
代码如下：
import { Component, ContentChild, AfterContentChecked } from '@angular/core';
@Component({
selector: 'card',
template: `
浏览 0提问于2018-09-28得票数 0
我想从random.component中获得一个元素，并通过选择它在我的主模态组件的页脚中显示它。
random.component.html
<div>random text</div>
<span projectThis>text text</span>
usecase.component.html
<modal>
<random></random>
</modal>
我试过了，但没有用：
modal.component.html
<h5>Title</h5>
&l
浏览 2提问于2020-11-25得票数 0
我有层次结构中的组件: app.component > intro.component > header.component。我想在header.component中使用在app.component中定义的方法。我认识到有办法用@viewChild做到这一点。让它工作的最简单的方法是什么？
//编辑我想在header.component.html中的html标签上执行(单击)事件。在这个函数中，我想运行app.component中的方法。
浏览 1提问于2017-09-26得票数 2
我有一个问题，就是我的ViewChild.nativeElement在所有生命周期挂钩中都是空的。我的组件看起来如下：
@Component({
selector: 'connector-component',
template: `
<ng-container>
<ng-content></ng-content>
</ng-container>
`
})
export class ConnectorComponent implements AfterContentInit {
浏览 0提问于2019-05-23得票数 1
回答已采纳
3回答
我有一个组件A和B
<div class="A">
<div class="A1"></div>
<div class="A2"></div>
</div>
<div class="B">
<!--want to display <div class="A1"></div> here-->
</div>
组件B不包含组件A或way
<componentA
浏览 1提问于2018-01-22得票数 2
回答已采纳
1回答
我有个指令：
@Directive({
selector: '[myDirective]'
})
export class MyDirective implements AfterViewInit {
@ViewChild('wrapper') wrapper;
@ViewChild('list') list;
ngAfterViewInit() {
// Both of these are undefined
console.log(wrapper, list);
}
}
它需要查询正在使用的视图中的
浏览 0提问于2016-09-17得票数 3
回答已采纳
我有一个Angular component类，在openModal()方法中，我不能访问@ViewChild的content属性，但很奇怪，作为static:true，即使在ngOnInit()和ngAfterViewInit()内部也没有这样的问题。我已经做好了准备，所以如果我把this.modalService.open(this.content)代码行放在这些回调函数中，一切都能正常工作，但是如果openModal()中的代码行打开时没有任何内容(ja当然是这样)。我已经在谷歌上对气候变化做出了重大贡献：
import {AfterViewInit, Component, OnInit,
浏览 0提问于2020-01-23得票数 0
当按下按钮时，这个柱塞应该打开一个模态。我已经扩展了现有的ngx模式，但它会引发错误:无法读取未定义的属性'nativeElement‘。
查看了控制台之后，这是因为应该将"modalRoot“作为模式的ViewChild处理程序进行编程分配。即使我在构造函数中添加了super()，但在扩展时似乎没有定义它，有什么想法吗？
//our root app component
import {Component, NgModule, HostListener, ElementRef} from '@angular/core'
import {Bro
浏览 0提问于2017-06-22得票数 0
回答已采纳
@ViewChild和@ViewChildren查询视图中的元素，DOM和@ContentChild，@ContentChildren查询内容DOM中的元素。
@ViewChildren(WriterComponent)
writers: QueryList<WriterComponent>;
@ContentChildren(WriterComponent)
writers: QueryList<WriterComponent>
在这里，我不明白视图DOM和内容DOM到底有什么区别，请有人解释一下。
浏览 0提问于2019-03-28得票数 4
2回答
这是我的模板：
<ng-template #template>
<input #newimg type="file" class="col-md-10" (change)="fileChange($event)"/>
</ng-template>
当#newimg在ng-template中时，我无法获得对它的引用(如果我将ng-template更改为div，它可以正常工作！)
@ViewChild('newimg') img: ElementRef; //doesnt work
我需要
浏览 5提问于2017-11-22得票数 11
我有一个侧导航组件，可以在很多页面上使用。这不是一个单一的网页应用程序。它动态地加载在切换菜单的父组件上。ContentChild用于获取子组件的句柄，以便通过设置@input overlayHidden来切换。问题是ContentChild是空的。
打开调试控制台运行此。单击第一页中的“仪表板”，然后从第二页单击"Toggle菜单“以查看空指针。
我做错了什么？
这是密码。
import { Component, Input} from 'angular2/core';
import { Router } from 'angular2/router';
浏览 0提问于2016-03-13得票数 1
当我将自定义的idNumber指令添加到子HTML元素时，所有操作都很好。我想在父类中使用它。然而，这是行不通的。
// custom directive ////////
@Directive({
selector: "[idNumber]"
})
export class IcoDirective implements OnInit {
formControl: FormControl;
constructor(private control: NgControl) { }
ngOnInit() {
this.formControl = <FormContr
浏览 0提问于2018-09-17得票数 1
1回答
组件与ng-template
@Component({
template: `
<div>Hello Component is here!</div>
<ng-template #cmp_anchor>
<div>Template content</div>
</ng-template>
`,
})
export class HelloComponent {}
使用ngTemplateOutlet呈现时，无法访问ng模板。
@Component({
selector: &#
浏览 1提问于2020-09-22得票数 0
1回答
我正试着做一个有棱角的爆米花。它目前有两个组件和一个指令。
当我点击我的按钮时，我会看到一个错误
ERROR TypeError:无法读取未定义的属性“openPopover”
我如何从指令中获得对父程序的引用，然后从该父程序中获取子元素？
因此，单击路径如下所示：[open-popover] / <map-popover> / <map-popover-content>
app.component.html
<mat-popover>
<mat-popover-content>
<p>Hello World</
浏览 3提问于2020-04-29得票数 1
回答已采纳
来自官方的。一个ViewChild
Configures a view query.
View queries are set before the ngAfterViewInit callback is called.
这个解释非常小，我仍然不太明白它是用来做什么的。
考虑一下我发现的一个博客中的。
删除@ViewChild(TodoInputCmp)对TodoInputCmp中的代码没有影响
有人能给我一些洞察力吗？
谢谢
浏览 6提问于2016-04-14得票数 30
回答已采纳
2回答
假设我有一个角度上的祖父母类，它的html如下所示：
<parent>
<child></child>
</parent>
父对象有一个需要呈现的变量，父变量由父变量传递给子变量，子变量将其绑定到它自己的预定义的html中。我怎样才能做到这一点？ViewChild和ContentChild似乎都没有完全发挥作用。
浏览 2提问于2018-03-12得票数 0
回答已采纳
我有一个如下的组件层次结构。
Parent Component A
-> Child Component B (child of component A)
-> Child component C (child of component B)
我们如何从间接父组件A获得对组件c的引用？我尝试使用view child从父组件访问子组件C，但未定义。
注意:子组件来自某个第三方库。我不能更改这些文件
stackblitz.com/edit/angular-bpmwxz
浏览 0提问于2018-12-12得票数 0
我正在尝试在ViewChild类型的NgModel上实现NgModel，但在OnInit、AfterViewInit或AfterContentChecked中仍然有相同的错误。
hmtl：
<form action="">
<input type="text" [(ngModel)]="searchTerm" name="searchTerm" #filterInput="ngModel" >
<button class="sp_search_btn" st
浏览 5提问于2020-06-05得票数 4
回答已采纳
我有一个名称为EasyBoxComponent的组件，以及一个具有此@Viewchild的@Directive
@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;
我认为这是正确的语法，但this.myComponent始终是未定义的。
下面是完整的代码：
<my-easybox></my-easybox>
<p myEasyBox data-href="URL">My Directive</p>
import { Directive, AfterViewIni
浏览 0提问于2017-04-07得票数 11
我尝试以嵌套在ng-content中的组件为目标，并像ViewChild一样处理它。例如，ComponentB被放在ComponentA的ng-content中。 我想要做的类似于： @ViewChild('componentB') componentBViewChild: ComponentB; 所以我可以像这样使用它的功能： this.componentBViewChild.functionFoo(); 问题是我不能添加一个引用来定位嵌套组件。 任何帮助都是欢迎的
浏览 17提问于2019-01-07得票数 0
回答已采纳
1回答
我需要渲染动态内容周围的一个输入角应用程序。
我的想法是创建一个自定义组件，然后使用ng-content将行为绑定到该输入。就像这样：
<my-wrapper>
<input type="text" otherAttributes...>
</my-wrapper>
我的包装纸应该如下所示。
HTML：
<span>
<ng-content #myRef></ng-content>
<button (click)="perform(myRef)">Clic
浏览 3提问于2020-02-07得票数 0
回答已采纳
我似乎提供了太多的信息，主要的问题是我如何从父模板click()事件调用子组件中的方法。 <button(click)='get()'>GET</button> 我的父母有他自己的get()，它是空的。我的孩子有一个customize get()，它是函数式的。我认为孩子的get()会覆盖父的，因为扩展。但是parents按钮click()仍然调用自己的父级get()。 我发现了一些与@ViewChild类似的解决方案，但我的父组件用于许多不同的子组件，所以我不能像这样声明@ViewChildproperty： @ViewChild(ChildCmp)
浏览 26提问于2020-12-05得票数 0
回答已采纳
2回答
如何从父组件的角度访问子组件？
、、、、
我在子组件中有mat-paginator，如下所示：
child.component.html
<mat-paginator #paginator></mat-paginator>
我希望使用@ViewChild()从父组件获取这个分页器，如下所示：
parent.component.html
<child
<!-- code omitted for simplicity -->
>
</child>
***parent.component.ts***
@ViewChild('paginator'
浏览 11提问于2021-01-05得票数 2
在使用<ng-content>时寻找访问组件值的方法
import {Component} from '@angular/core';
@Component({
selector: 'home-page',
template: `<person-box>{{name}}</person-box> <!-- something like this -->`
})
export class HomePageComponent {
// missing code?
}
组件代码：
import {Compo
浏览 3提问于2017-03-08得票数 1
回答已采纳
我使用的是双句柄nouislider.它工作得很好，但是当我试图从代码中更新句柄位置时，我总是会得到错误: set不是一个函数。我遗漏了什么？
//HTML
<nouislider #mrangeslider [connect]="true" [step]=".05"
[(ngModel)]="sliderMRangeSel" (change)="updateSliderM($event)"
[min]="sliderMBounds[0]"
[ma
浏览 0提问于2019-02-15得票数 1
回答已采纳
在HTML模板中，我有以下实现：
<tr sliding>
<td>Field 1</td>
<td>Field 2</td>
<td>
<app-sliding>Field 3</app-sliding>
</td>
</tr>
我有以下指令：
@Directive({
selector: '[sliding]'
})
export class SlidingDirective {
@HostListener('mo
浏览 2提问于2020-01-22得票数 0
回答已采纳
我有一个my-alert-component，它看起来像这样：
import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-my-alert',
template: `
<h1 (click)="alert()">{{type}}</h1>
<ng-content></ng-content>
`
})
export class MyAlertComponen
浏览 5提问于2017-11-22得票数 1
我有一个更高级、通用的组件，子组件将实现一个接口。
我需要将子组件的句柄放到更高级别的父组件中。在下面的片段中，我尝试使用@viewChild将#contentComponent引用到父组件中(查看父组件的html )。
我还试着在它周围的div上使用elementRef，包括ng内容和查看孩子。我找到ng内容的组件div，但是我不知道如何将它转换为组件的引用。
<div style="width: 100%">
<paper-card [heading]="documentIndex.name" class="mix-brow
浏览 2提问于2017-05-06得票数 1
从官方的中，下面是启用树抖动的lightweight injection token模式的一个示例：
abstract class LibHeaderToken {}
@Component({
selector: 'lib-header',
providers: [
{provide: LibHeaderToken, useExisting: LibHeaderComponent}
]
...,
})
class LibHeaderComponent extends LibHeaderToken {}
@Component({
selector:
浏览 5提问于2022-03-04得票数 1
回答已采纳
1回答
我正在使用内容投影将按钮放入组件中。
<hello name="{{ name }}">
<button #btn>Click Me</button>
</hello>
和组件：
@Component({
selector: 'hello',
template: `
<h3>Hello {{name}}!</h3>
<ng-content></ng-content>
`
})
到目前为止一切顺利..。但是现在我想向该按钮添加一个(单击)事件侦听
浏览 3提问于2018-08-29得票数 3
回答已采纳
我需要将一些数据传输到子元素中，并在其中运行函数。我使用ViewChild访问该函数。但在子childParam中仍未定义。
父模板：
<my-modal #myModal [childParam]="parentParam"></my-modal>
父组件：
@ViewChild('myModal') myModal;
parentParam: any;
onSubmit(value: any){
this.parentParam = value;
this.myModal.modalShow();
}
儿童部分：
@Inpu
浏览 3提问于2017-02-16得票数 3
回答已采纳
在angular2组件中使用转换时，我的'ViewChildren‘似乎无法检测到这些组件。当我制作一个组件，其中我直接定义了相同的组件，那么它工作得很好。现在有没有人有办法让这件事生效呢？
浏览 3提问于2016-08-28得票数 2
回答已采纳
1回答
我有一个使用@ViewChild的应用程序，下面是我的代码
@ViewChild('paginator', { read: MatPaginator, static: true}) public paginator: MatPaginator;
在前面，我使用<mat-paginator [ngStyle]="{'display': orders.length > 0 ? 'flex': 'none' }" #paginator>并实现了AfterViewInit，这是我用来检查分页器是否已初始
浏览 8提问于2019-07-11得票数 4
回答已采纳
我想知道使用依赖项注入组件和@ViewChild之间有什么区别。这两种方法我都可以使用父属性方法。所以，我什么时候该来？
依赖注入
import { Component, OnInit } from '@angular/core';
import { CompB } from './compb/compb.component';
@Component({
moduleId: module.id,
selector: 'app-test',
templateUrl: 'compA.html'
})
expo
浏览 3提问于2016-08-01得票数 4
回答已采纳
我正在寻找@ ，并想知道是否有可能有一个基本的abstract class代替？而不是interface，是否有可能在子组件中有不同的基类实现，这些实现可以通过Angular2中的@ViewChild装饰器对父组件进行访问。
理想情况下，我希望有一种方法让通过父Router实例化的子组件能够调用父路由器--这有意义吗？我希望孩子能打电话给parentRouter.navigate(["SomeOtherRoute", { args: 'blah' }]);。
我最初的方法是让子组件实现一个基类，父组件将通过@ViewChild装饰器获得引用。父节点将对试图调用导
浏览 0提问于2016-04-25得票数 9
回答已采纳
是否可以将模板与如下所述的ng-content结合使用：
应用组件：
<table-column>
<template #template let-item="item">
<input type="text" [(ngModel)]="item.foo" />
</template>
</table-column>
表-列组件：
@Component({
selector: 'table-column',
template: '<n
浏览 0提问于2017-04-03得票数 18
回答已采纳
我相信对此的答案是“否”，但是在角度上是否有一种方法/服务可以传递组件的根DOM节点(例如<foo-component>)并接收组件实例(例如FooComponent)？
我找不到相关的帖子。
示例：
<foo-component id="foo"></foo-component>
const fooElement: HTMLElement = document.getElementById('foo');
const fooInstance: FooComponent = getInstanceFromElement(fo
浏览 4提问于2019-10-15得票数 7
我正在构建一个聊天应用程序，其中离子脚注被用作文本框+发送按钮。当我点击输入框时，键盘会根据我的需要弹出。然而，当我点击发送按钮时，键盘就会关闭，这对最终用户来说是一种令人沮丧的体验。
据我所知，这是因为键盘失去了焦点，而ionic将其向下推。然而，这不是我想要的。我如何保持键盘的原样，直到我真正按下发送按钮。
my current ionic 2 looks like
<ion-footer padding>
<form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
浏览 0提问于2017-06-04得票数 0
2回答
你是如何在儿童与儿童中进行Angular2沟通的？描述了许多执行父-子通信的方法。然而，父母所包含的孩子如何相互影响呢？一个孩子能捕捉到另一个孩子发出的偶数吗？到目前为止，我的尝试都失败了，我想知道是否有人有一个良好的儿童沟通模式。
例如，我如何连接这两个子组件以听到彼此发出的事件？这是我迄今为止的尝试：
@Component({
template: `
<section>
<app-countdown-timer (onResetTimer)="countdownTimerComponent.resetCountDownT
浏览 2提问于2017-02-28得票数 1
import { Component, OnInit, ViewChildren } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-parent'
styleUrls: [],
templateUrl: `<div>
<app-child *ngFor="let data of datas
浏览 0提问于2017-11-10得票数 13
回答已采纳
我有一个表单容器，用于正确地显示验证错误。我通过ContentChild装饰器访问表单控件，并对其进行反应性操作，以构建验证消息。
我的问题是:如何正确地单元测试这样的组件？
component.ts
import { Component, ContentChild, Input, AfterContentInit } from '@angular/core';
import { FormControlName } from '@angular/forms';
import { Observable } from 'rxjs/Observable
浏览 1提问于2018-01-14得票数 4
回答已采纳
我需要在app.module.ts中滚动来自另一个产品组件的标记
app.module.ts
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<nav-header></nav-header>
<main class="mdl-layout__content" #scrollMe>
<router-outlet></router-outlet>
<
浏览 24提问于2018-03-02得票数 0
回答已采纳
我一直在谷歌搜索，对5/6的角度还有点陌生，但我想看看是否有什么可能。
问题
假设我有一个模板：
<ng-template #rt let-r="result" let-t="term">
<ngb-highlight [result]="r.typeAheadDisplayName" [term]="t" ></ngb-highlight>
<span *ngIf="r.primaryName ">(alias for {{ r.primaryName }
浏览 0提问于2018-05-18得票数 9
回答已采纳
2回答
我的项目库是ngx-rocket。 在那里，页眉是一个自己的组件，带有在内容页面(主页、关于等)中导航的按钮。和一个下拉菜单。 我想添加一个按钮到自定义内容页面组件的页眉。 但我不知道该怎么做。 我的意思是，我可以将按钮添加到header.component.html中，但这似乎不正确，因为这将影响所有内容页面(以及如何管理单击按钮时的组件交互？)。 这样做的常见做法是什么？
浏览 26提问于2019-03-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
