父类的ContentChild
是Angular框架中的一个装饰器，用于在子组件中获取父组件中的内容。它可以用来获取父组件中的模板引用变量、指令、组件等。
ContentChild装饰器可以应用于类的属性上，并接受一个参数，该参数是一个选择器，用于指定要获取的内容的类型。选择器可以是一个指令、组件、模板引用变量等。
使用ContentChild装饰器，可以在子组件中获取父组件中的内容，并进行操作或者传递给其他组件。
ContentChild的优势在于可以方便地在父子组件之间进行通信和交互。通过获取父组件中的内容，子组件可以根据需要进行相应的处理，实现更灵活的组件间交互。
ContentChild的应用场景包括但不限于以下几种情况：
- 父组件中包含了一些需要在子组件中使用的模板引用变量，可以通过ContentChild获取这些变量，并在子组件中进行操作。
- 父组件中包含了一些指令或组件，子组件需要对其进行操作或者传递给其他组件，可以通过ContentChild获取这些指令或组件，并进行相应的处理。
- 父组件中包含了一些需要在子组件中展示的内容，可以通过ContentChild获取这些内容，并在子组件中进行展示或者其他操作。
腾讯云相关产品中与ContentChild相关的产品包括但不限于：
- 腾讯云云函数（SCF）：腾讯云云函数是一种事件驱动的无服务器计算服务，可以通过云函数与其他腾讯云产品进行集成，实现更灵活的应用开发和部署。可以使用云函数来处理ContentChild获取的内容，并进行相应的操作。 产品介绍链接：https://cloud.tencent.com/product/scf
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：腾讯云云数据库MySQL版是一种高性能、可扩展的关系型数据库服务，可以用于存储和管理应用程序中的数据。可以将ContentChild获取的内容存储到云数据库中，并在需要的时候进行读取和操作。 产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
请注意，以上只是腾讯云的一些相关产品示例，实际使用时需要根据具体需求选择适合的产品。
相关·内容
我想要创建一个可重用的组件，它可以使用自定义模板来呈现数据，同时组合业务逻辑，这样我就不必重复自己了。
示例用例：分页列表。分页逻辑应该在可重用组件中，因此只能编写一次，但是数据的主题/表示应该使用ng-template定制。
我在子组件中使用ngTemplateOutlet来引用父组件中的ng-template，但是我得到了以下错误：
错误TypeError: templateRef.createEmbeddedView不是一个函数
可重用组件中的第一个ng-container工作得很好，这是最后一个给出错误的3。
这是我的可重用组件：
@Component({
selector
浏览 0提问于2018-02-18得票数 9
回答已采纳
2回答
结构：
<div id="content">
<div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
<br />
some text
</div>
在文档加载之后，我有一个js脚本，它查找所有带有"ParentCollapser“的元素，并将单击驱动函数附加到这些元素，这些函数允许用户在单击时折叠父元素(现在将height设置为0)。
除了一些样式问题之外，单击操作工作得
浏览 1提问于2014-09-08得票数 0
我有一个模态窗口组件，并且我通过<ng-content></ng-content>插入了带有转换的模态内容组件。我需要在我的模态内容中从模态组件中调用一个函数。在本例中，它是为了重置模式内容的状态。如何获得对我的模式内容的引用，以便我可以调用它的一个函数？或者，有没有更好的方式来与我的子内容组件通信？
更新:我正在转换不同的组件，所以我确实需要一种方法来获得引用，而不需要知道转换的内容是什么类型。
我已经尝试了几个我已经找到的变通方法，但我没有任何运气。如果有人能提供一个plunkr，那将会有很大帮助。
浏览 11提问于2017-02-17得票数 4
回答已采纳
2回答
在搜索了一段时间之后，我没有找到任何我可以使用的东西。
我需要创建一个包装组件，它有一些按钮可以调用内部组件中的方法，如下所示：
包装组件：
<div class="card">
<header class="card-header">
<button (click)="onRefreshClick()">Load</button>
</header>
<div class="card-block">
<ng-content
浏览 4提问于2020-06-13得票数 0
回答已采纳
1回答
我已经创建了通用组件，它将以表格格式呈现数据。
data-table.component.ts (这是可重用的组件，任何子组件都可以使用)
@Component({
selector: 'data-table',
templateUrl: './data-table.component.html',
styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit
浏览 1提问于2020-12-18得票数 3
回答已采纳
我有一个使用内容投影的组件。
<ng-content select="button">
</ng-content>
我想在我的组件中做一些类似的事情：
@ContentChild('button') button: ElementRef;
然而，当我检查this.button时，它在ngAfterViewInit和ngAfterContentInit中都是undefined。
如果我的content子元素是本机元素而不是自定义组件，我如何选择它？
浏览 2提问于2018-08-03得票数 6
例如，如果我有这样的结构：
<parent-component>
<child-a class="a"></child-a>
<child-a class="b selected"></child-a>
<child-b class="c"></child-b>
<child-b class="d"></child-b>
...
</parent-component>
如何
浏览 3提问于2017-02-09得票数 0
回答已采纳
我有两个共享组件，我希望父组件在其子组件中调用一个方法。
共享组件1(父级)
@Component({
selector: 'parent',
template: `<div>
<div #parentBody>
<ng-content select="[parentBody]"></ng-content>
</div>
<button (click)="
浏览 0提问于2019-01-22得票数 2
回答已采纳
我有一个嵌套在另一个手风琴中的mat-accordion，我想直接呈现父手风琴的内容，但是延迟加载子手风琴。通过将手风琴内容包装在带有matExpansionPanelContent指令注释的ng模板中，提供了用于延迟加载的角度材料。
我的代码如下所示：
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
Panel 1
</mat-expansion-panel-header>
<div class="pan
浏览 6提问于2020-06-12得票数 1
我正在尝试制作可重用的资料表，我想使用TemplateRef和ngTemplateOutlet来生成列。在示例中，我创建了使用cards组件的cards组件。在cards.component.html中，我有一个表列的模板。运行该项目将导致错误ERROR TypeError: Cannot read property 'template' of undefined (请参阅stackblitz上的控制台)。是否可以将列模板传递给我的MaterialTableComponent并使用它来定义列？
<table mat-table [dataSource]="dat
浏览 0提问于2018-10-15得票数 10
我为表创建了共享组件，可以在其中传递头和数据，这样我就可以在多个其他组件中使用它。
现在，场景是在一个组件中，我希望在每一行中有一个Edit按钮，在第二个组件中，我想要Active/Inactive单选按钮，所以我使用<ng-content>，但是它只会添加到表的最后一行。
下面是示例代码：
浏览 5提问于2020-05-21得票数 0
回答已采纳
从官方的中，下面是启用树抖动的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
回答已采纳
角2新手在这里，我试图使母版，处理基本的活动，如重置，保存功能。主表单使用ng-content加载其内容区域。
在单击save按钮时，我希望Master在执行自己的指令集之前调用子组件save()函数。
我该怎么做？
我认为这个问题与我想要的有点相似，但是这个问题的解决方案并没有有效的
下面是我的代码，请你帮忙
form.component.ts
import { Component, Input, Output, ContentChild } from '@angular/core';
@Component({
selector: 'app-form',
浏览 1提问于2017-04-04得票数 1
回答已采纳
我正在尝试从子组件的父组件获取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
我有一个非常复杂的组件，它有大量的**@ lot ()**s。为了便于阅读，我想像DexExtreme的网格一样对输入进行分组。
DevExtreme网格有大量的输入，它们按如下方式划分它们：
<dx-data-grid
[dataSource]="dataSource"
[remoteOperations]="false">
<dxo-paging [pageSize]="10"></dxo-paging>
</dx-data-grid>
如您所见，分页参数不是直接传递
浏览 1提问于2021-10-07得票数 0
回答已采纳
1回答
只有在存在的情况下，我才能包装已被屏蔽的内容？
例如，my-component的模板
<div>
...
<div *ngIf="isInvalid" class="error">
<h2>Extra errors:</h2>
<ng-content select="extra-error-messages"></ng-content>
</div>
...
</div>
组件可以这样使用
浏览 2提问于2017-12-22得票数 2
回答已采纳
当子组件观察到输入变化时，如何调用父组件的函数？
下面是HTML结构。
# app.comopnent.html
<form>
<textbox>
<input type="text">
</textbox>
</form>
# textbox.component.html
<div class="textbox-wrapper">
<ng-content>
</div>
限制如下所示。
TextboxComponent有ng-content
浏览 2提问于2016-04-23得票数 10
回答已采纳
我正在研究ngTemplateOutlet的概念，使之成为动态上市系统。
<app-dynamic-list [items]="items">
<ng-template let-item>
{{ item.id }} - {{ item.names.en }} ({{ item.names.np }})
</ng-template>
</app-dynamic-list>
这里的let-item应该是items的一个实例。我应该在组件级别做些什么才能得到这样的结果。我在stackoverflow上读
浏览 3提问于2020-06-28得票数 0
1回答
我在试着理解是否有可能出现以下情况。我有一个视频上传组件，用户可以上传一个或多个视频。这个组件有3个视图选项1.在不同的进度视频和上传的视频显示在单独的表中。2.组合--所有视频都显示在状态3的同一表中，仅显示UploadOnly上传的视频。
今天，视频上传程序的代码看起来就像这样
<div class="video-uploader-container">
<combine-videos-display videos="videos" *ngIf="view = views.combine"> </com
浏览 0提问于2017-07-11得票数 1
回答已采纳
我有一个表单容器，用于正确地显示验证错误。我通过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
回答已采纳
试图理解Angular2，但不知何故@ContentChild不起作用。从我这一端肯定有一个非常基本的错误，但我不能弄清楚它在哪里。任何帮助都将不胜感激。
app.components.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<p #boundContent>{{localCounter}}</p>
Verify me: <p>{{boundContent.
浏览 0提问于2016-12-22得票数 2
回答已采纳
我是新的角度，所以我道歉，如果我犯了愚蠢的错误，当我试图从组件B调用组件A的当前值时，它会产生错误。当弹出模态表单处于活动状态时，我试图调用这些值。在单击打开的弹出窗口时，我试图调用一个函数"editUserData()“，但它会产生错误。
构成部分A
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { userRegistrationData } from
'src/app/models/reg
浏览 1提问于2018-11-13得票数 0
我刚刚升级到了Range7，我正在努力使我的组件库能够正确编译。
我有以下代码：
自动完成。组件.auto：
<li *ngFor="let item of items; let index = index;">
<ng-container *ngTemplateOutlet="listItemTemplateRef.template, context: { $implicit: item, index: index }"></ng-container>
</li>
在我的AutoComplete.Comp
浏览 0提问于2018-11-15得票数 0
回答已采纳
我有一个带有字符串插值的变量：
<div class="ui-grid-cell-contents"><a href="core/upload/link/table/key/{{data.key}}" target="_blank">{{data.name}}</a></div>`
这个变量位于父组件中，我需要它在生成“数据”的子组件中。
所以我只想：
<div [innerHTML]="$any(col.cellTemplate) | safeHtml
浏览 2提问于2022-08-11得票数 0
创建如下所示的组件
<div class="test-search-field"
[ngClass]="{'expanding': expanding}">
<ng-content></ng-content>
</div>
该组件的用户在使用此组件时将添加一个input元素。
<my-input-container>
<input type="search" placeholder="Search">
</my-input
浏览 2提问于2018-04-10得票数 3
回答已采纳
我遇到了一个奇怪的bug，在ng-template中包装了一个ng-content。
假设我有一个在outer-component中显示的组件inner-component
<ng-container *ngIf="condition" [ngTemplateOutlet]="test"></ng-container>
<ng-template #test>
<inner-component></inner-component>
</ng-template>
如果为condition
浏览 5提问于2020-09-10得票数 2
1回答
在选择器中使用内容投影时，如下所示：
<ng-content select="[appChecklistTitle]">
我怎么知道是否有匹配的东西？基本上，我想要一个，“如果提供的内容放在这里，否则使用一些默认内容”。
浏览 2提问于2022-10-11得票数 0
回答已采纳
2回答
假设我有以下组件Child。
@Component({...})
class Child {
@Input() mySpecialFlag: boolean;
}
Child既可以作为独立组件使用，也可以由Special组件包装，该组件“作用于”Child的行为。当Child单独使用时，用户可以选择将[mySpecialFlag]设置为true或false。当Child在Special中使用时，我希望Special组件强制输入[mySpecialFlag]为true，方法如下：
@Component({...})
class Special {
@ContentChild(Child)
浏览 1提问于2019-02-17得票数 3
回答已采纳
2回答
假设我有一个角度上的祖父母类，它的html如下所示：
<parent>
<child></child>
</parent>
父对象有一个需要呈现的变量，父变量由父变量传递给子变量，子变量将其绑定到它自己的预定义的html中。我怎样才能做到这一点？ViewChild和ContentChild似乎都没有完全发挥作用。
浏览 2提问于2018-03-12得票数 0
回答已采纳
1回答
我有芯片列表组件。在它内部，我投影了一个输入和另一个组件。但是我想要访问输入。 <app-chip-list>
<input #input [id]="autoCompleteSearchInput" type="text" autoComplete="off"
class='input-underline search-bar idented-text' [placeholder]="placeholder"
[formControl]="sea
浏览 18提问于2021-07-23得票数 0
9回答
我在顶层组件中有一个属性，它使用来自HTTP源的数据，如下所示(这是在一个名为app.ts的文件中)：
import {UserData} from './services/user-data/UserData';
Component({
selector: 'app', // <app></app>
providers: [...FORM_PROVIDERS],
directives: [...ROUTER_DIRECTIVES],
pipes: [],
template: require(&#
浏览 9提问于2016-02-08得票数 86
回答已采纳
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
回答已采纳
3回答
我有一个组件，它的模板如下所示：
<div [my-custom-directive]>Some content here</div>
我需要访问这里使用的MyCustomDirective类实例。当我想访问子组件时，我使用ViewChild查询。
有没有一个等效的特性来访问一个子指令？
浏览 0提问于2016-04-01得票数 75
回答已采纳
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
回答已采纳
我正在尝试构建一个自定义数据集，它可以将数据显示为卡片，也可以显示更为传统的表/列表/网格。如果我不希望模板是可自定义的，我可以很容易地做到这一点，如这个所示
这里我有一个my-grid组件，它传递要呈现的数据。然后循环遍历数据，并根据所需的视图呈现card-view或list-view组件，该视图由view toggle ( app/my-grid.ts文件中的代码)控制。
我想提供传递自定义模板的能力，我的想法如下：
<my-grid>
<card-view-template>
<template var-item>
<h4
浏览 0提问于2016-02-24得票数 7
1回答
如何与角中的分量递归绑定
、、、、
我有一个简单的代码：
@Component({
selector: 'app-tree',
template: `<div>{{content.name}}</div>
<app-tree [(content)]="contentChild"
*ngFor="let contentChild of content.childs"></app-tree>`
})
export class TreeCompo
浏览 0提问于2018-04-23得票数 0
回答已采纳
我有一个form-field组件。在内部，我投影的是content - input html元素。在该元素上，我附加了一个名为autoCompletition的指令。 <app-form-field>
<input [id]="autoCompleteSearchInput" [formControl]='search' type="text" autoComplete="off"
class='input-underline search-bar idented-text&
浏览 7提问于2021-07-26得票数 0
回答已采纳
2回答
我对角v2+很陌生，并且我看到了在构造函数中获取组件对象的代码，如下所示：
constructor(private host: MapComponent) {
}
。这是真的吗？
浏览 0提问于2019-07-02得票数 0
回答已采纳
我希望能够以这种方式将组件和其他html传递到其他组件中：
<app-container-component>
<h3>All these items should be displayed in parent component</h3>
<app-another-component></app-another-component>
</app-container-component>
如何读取容器组件的内部项并在组件模板中呈现它们？
浏览 1提问于2018-06-29得票数 1
回答已采纳
我正在编写组件来帮助实现语义UI元素。我的‘<ng-content>’元素的模板包含几个卡片元素，用于转换卡片的特定部分。由于Semantic-UI的CSS的特殊性，我希望将类名应用于一些transclusions的根元素。我曾尝试使用指定了类的包装器元素，但由于CSS规则的嵌套不正确，这导致了子元素中的一些错误。
此时的组件模板：
<div class="image" *ngIf="image">
<img src="{{image}}">
</div>
<div class="
浏览 1提问于2017-12-06得票数 0
<app-component [date]="'13.10.2022'">
<app-test-content [content]="content"></app-test-content>
</app-component >
Here is from app-component
<div *ngFor="let number of [1,2,3]">
<h1>{{date}}<
浏览 1提问于2022-10-13得票数 0
1回答
我在angular 2中有一个自定义指令，如下所示：
import {Directive} from '@angular/core'
//import {ChartModel} from '../models/chart.model'
@Directive({ selector: '[genericCharts]' })
export class GenericChartsDirective {
public KendoInitGenericDonutChart(selector, chartdata, type, field, de
浏览 0提问于2016-11-07得票数 0
我正在创建一个自动完成组件，并试图弄清楚如何处理项目的“显示”。我尝试过使用ng-content并呈现项目，但是它失败了。我想要的是一种实现ng-content并将“数据”传递给子内容的方法。当我试图传递内容时，它总是失败，并说"item“是未定义的。
<input-auto-complete
[data]="searchResults"
(onItemSelected)="onItemSelected($event)"
(onSearch)="onSearch($event)">
{{i
浏览 0提问于2017-03-01得票数 1
回答已采纳
我试图获得多个模板参考使用@ContentChild，但第一个是显示。
modal.component.html
<div class="ac-modal">
<ng-container [ngTemplateOutlet]="modalHeader"></ng-container>
<ng-container [ngTemplateOutlet]="modalBody"></ng-container>
<ng-container [ngTemplateOutlet]=
浏览 1提问于2018-06-10得票数 0
回答已采纳
我有一个角组件app-b，是在组件应用程序中使用的-a是应用程序组件中使用的。app组件在app-a，app-a中包含了一些内容，将ng内容转换为app-b，app-b用另一个ng-内容显示了它，但是我如何在组件中访问这个内容(而不是它的模板)？
我认为ContentChild是正确的方法，但似乎是错误的。
示例：
编辑:更新的示例
浏览 0提问于2018-04-18得票数 1
回答已采纳
2回答
我正在尝试创建一个组件，它接受多个模板作为输入。这就是我的例子：
@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<ng-template
*ngFor="let item of itemsData"
ngFor let-item [ngForOf]="[item]"
浏览 3提问于2017-04-26得票数 18
回答已采纳
我需要将一个表达式传递给将在组件模板中进行评估的组件。
例如，组件：
@Component({
selector: 'app-my-component',
...
})
export class MyComponent {
@Input items: MyClass;
@Input expression: String;
...
}
使用组件的模板：
<div *ngFor="let item of items">
{{expression}}
</div>
MyComponent的使用：
<app-my-c
浏览 3提问于2016-10-11得票数 9
回答已采纳
我有父母的成分。在它里面，我在投影一个输入。
<app-form-field>
<input #input [id]="autoCompleteSearchInput" type="text" autoComplete="off"
class='input-underline search-bar idented-text' [placeholder]="placeholder"
[formControl]="search" />
</app-form
浏览 3提问于2021-07-26得票数 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
2回答
我想要创建生成数据集的childComponent。所以，我创建了grid.component.html和grid.component.ts。我的目标是，我的队友从来不碰grid.ts和grid.html。因为我的网格结构在我的应用程序中的所有页面上都是相似的。因此，它们只添加了myComponent.html和myComponent.ts。他们将编写按钮的html和按钮的单击事件到myComponent。我可以创建网格。但我的问题是，我无法访问rowData中的showDetail方法。("rowData“隐含着primeNg指令。我哪里都没准备好。我只给出了p表值。)
myComp
浏览 0提问于2018-10-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
