在angular中获取自定义组件引用？
在Angular中获取自定义组件引用可以通过以下步骤实现：
- 在父组件的模板中，使用
ViewChild装饰器来获取子组件的引用。例如，如果子组件的选择器是app-custom-component，可以在父组件的模板中添加以下代码：<app-custom-component #customComponentRef></app-custom-component> - 在父组件的类中，使用
@ViewChild装饰器来声明一个成员变量，并指定选择器和引用的类型。例如，如果子组件的选择器是app-custom-component，可以在父组件的类中添加以下代码：import { Component, ViewChild } from '@angular/core'; import { CustomComponent } from './custom.component'; @Component({ selector: 'app-parent-component', template: ` <app-custom-component #customComponentRef></app-custom-component> ` }) export class ParentComponent { @ViewChild('customComponentRef') customComponent: CustomComponent; } - 现在，可以在父组件的代码中使用
customComponent变量来访问子组件的属性和方法。例如，可以在父组件的方法中调用子组件的方法：someMethod() { this.customComponent.someMethod(); }
这样，你就可以在Angular中获取自定义组件的引用了。请注意，ViewChild装饰器还可以接受其他参数，例如static: true用于在ngOnInit生命周期钩子之前解析视图。有关更多详细信息，请参阅Angular官方文档中的ViewChild部分。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送）：https://cloud.tencent.com/product/umeng
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Qcloud XR）：https://cloud.tencent.com/product/qcloudxr
相关·内容
1回答
两个角度组件之间的通信
angular、typescript
我想将子组件的数据用于父组件中的图表。在一个angular文档中，我找到了一种方法来解决我的问题，但它不起作用。我的图表仍然是空的。我是不是在代码中遗漏了什么，或者这项技术不能解决我的特殊问题？我添加了一些代码片段，以便以一种简单的方式表示问题。 Child.ts import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './
浏览 13提问于2021-10-06得票数 0
2回答
角:如何访问父组件中的子组件模板变量？
angular、angular5、angular2-template
我试图在父#temp中访问modalconfirm.component.html的app.component.ts，但它始终为null。
modalconfirm.component.html
<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
<br><br>
<pre class="card card-block card-header"
浏览 1提问于2018-04-19得票数 2
3回答
点开磁盘管理后没有磁盘1只有磁盘0？
云服务器、官方文档
请描述您的问题
标题：快速入门 Windows 云服务器 - 云服务器 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/213/2764
浏览 1741提问于2018-01-31
1回答
角2动态样式绑定
css、angular、binding
我有以下的角2分量：
import { Component, Inject, Input } from '@angular/core';
@Component({
selector: 'generic-component',
templateUrl: 'generic-component.component.html',
styleUrls : ['generic-component.component.css']
})
export class GenericComponentComponent{
浏览 3提问于2017-01-12得票数 0
回答已采纳
1回答
想了解@ViewChild()的工作原理
angular
我的问题id与之前的帖子答案相关。
在typescript代码中隐藏模式的解决方案是让@ViewChild( ModalDirective )模式:ModalDirective访问本地引用，然后在该引用上使用hide方法。
但根据我作为Angular @ViewChild(' modal ')模式的初学者的理解，应该使用ModalDirective，因为@ViewChild使用本地引用作为参数。那我们为什么要通过ModalDirective。
浏览 0提问于2019-09-03得票数 0
1回答
父组件的变量不能在子组件中访问
angular6
我需要在我的RolesComponent中检查这个加载的变量是真还是假。
但是我得到了这个错误：
ERROR TypeError: Cannot read property 'loaded' of undefined
这些是我尝试过的代码
用户
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class Users
浏览 3提问于2018-10-24得票数 1
3回答
角4分量呈现为空。
html、angular
我对角度很陌生，我试图定义一个组件并在我的主页中使用它。
问题是，当在index.html中使用组件时，我只能看到<custom-component></custom-component>是空的，里面什么也没有。
所以我做的是：
在角cli: ng生成组件自定义。
在custom.component.html中，我在段落标签中只有一个文本。
在index.html中，我插入了在custom.component.ts (应用自定义)中找到的选择器作为标记。
在app.module.ts中，我导入了自定义组件。
ng服务只输出应用自定义标签，而不包含应该
浏览 5提问于2017-11-15得票数 4
回答已采纳
2回答
子组件中的按钮不显示。
angular
如下所示，我有一个名为Treatment-as-tiff的组件，它的html文件中应该有一个按钮。当在site-map-component.the中发生特定操作时，该按钮应该是可见的--当我运行代码并将该操作设置为不显示该按钮时
请让我知道我在这里错过了什么
TreatmentAsTIFF html
<button *ngIf="iTreatmentAsTIFFVisibilityPasser.visibilityState"
title="Get Treatment As TIFF"
class="btn btn-sm bt
浏览 3提问于2021-09-28得票数 0
1回答
对于组件交互，哪种方法是最佳的@输入、@输出或使用服务
angular6
对于组件交互，我在angular6中有一些查询。对于组件交互，我们有@Input、@Output、viewChild和services等方法。但大多数情况下我们将使用服务。
在什么情况下，我们需要使用@Input、@Output和viewChild来传递应用程序中的值
@Input、@Output和viewChild方法有什么限制吗？
我们可以使用@Input，@Output方法传递大量数据或值数组吗？
我们可以在本地范围内使用“输入”和“输出”吗？请帮助我澄清我的疑虑
浏览 0提问于2019-07-19得票数 1
回答已采纳
1回答
我对角的ViewConatinerRef有疑问
angular
我看到了一些使用ViewContainerRef的例子。
first
@Component({
template: `
<div>
<ng-template>
<h3> dynamic view </h3
</ng-template>
</div>
<button (click)="onClick()">Click it</button>
`,
})
export class MyComponent {
@Vi
浏览 4提问于2022-07-17得票数 0
请描述您的问题
标题：存储桶概述 - 对象存储 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/436/6244
浏览 976提问于2018-01-31
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, AbstractControl } from '@angular/forms';
import { FamilleCouple } from 'src/app/FamilleCouple';
@Component({
selector: 'app-marie',
templateUrl: './marie.component.html',
styl
浏览 3提问于2022-04-07得票数 1
6回答
@Input()在Angular中用来做什么？
angular、typescript
我正在研究angular.io上的教程，然后我注意到了@Input装饰器属性：
// src/app/hero-detail/hero-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
浏览 0提问于2017-08-18得票数 63
2回答
以编程方式单击子组件窗体中的按钮
angular
我试图在子组件中单击窗体上的一个按钮。我也尝试过使用ViewChild & ViewChildren，将模板引用为ElementRef。它都返回值，而不是本机元素。
import {
Component,
ViewChild,
AfterViewInit,
ElementRef
} from '@angular/core';
import {
HelloComponent
} from './hello.component';
@Component({
selector: 'my-app',
template
浏览 2提问于2018-08-22得票数 3
回答已采纳
2回答
如何在parentComponent angular中显示childComponent中的工具提示内容
angular、bootstrap-4、tooltip
我已经创建了一个父组件：-
@Component({
selector: 'parent',
templateUrl: '../views/parent.view.html'
})
export class ParentComponent {
@ViewChild('primaryColorSample')
primaryColorSample: AssetNoteComponent;
}
父html :-
<div> <a [tooltip]="primaryColorSample
浏览 5提问于2018-08-24得票数 1
回答已采纳
2回答
答：
不要使用exportAs
使用@ViewChild('myContent') myContent；获取父类的实例
只有当视图被初始化时，它才能工作，所以最好使用ngAfterViewInit。
这关系到继承！
base class (component)
|
inherited class (component)
我有一个用exportAs导出的基类组件。
@Component({
selector: 'my-content',
exportAs: 'myContent',
...
})
浏览 5提问于2017-08-30得票数 1
回答已采纳
1回答
使用茉莉花和业力进行单元测试时会发生CUSTOM_ELEMENTS_SCHEMA错误
angular、unit-testing、jasmine、karma-jasmine
我正在用茉莉花和业力做单元测试。我能够在简单的应用程序中运行测试，但是当我测试包含其他组件的页面时，它会显示如下错误
如果“自定义组件”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中，以抑制此消息。
custom-component.html
<div class="data-container">
<ion-row>
<!-- Display week Day and Dates -->
<ion-col clas
浏览 2提问于2017-10-25得票数 2
回答已采纳
1回答
如何在绑定到API响应的角材料表中添加分页
angular、pagination、angular-material
我对角质还不熟悉。在我的项目中，显示了正确的产品列表及其工作。
我的HTML代码如下：
<table mat-table [dataSource]="list_product" style="width: 20%;">
<!-- id Column -->
<ng-container matColumnDef="id" style="width: 20%;">
<th mat-header-cell *matHeaderCellDef style="
浏览 3提问于2021-03-28得票数 3
回答已采纳
2回答
AngularJS组件等效组件需要角度组件中的属性
angularjs、angular、angular-upgrade
我正在升级一个大型的Angular 1.6应用程序，我们有许多组件使用'require‘来访问父组件的控制器。AngularJS组件如下所示：
var tileTextbox = {
template: '<ignore>',
controller: TileTextboxController,
bindings: {
field: '<',
notifyError: '&',
context
浏览 3提问于2018-11-30得票数 2
4回答
数据比较多，有什么好点的存储方案吗？
对象存储、文件存储
贵州地区，给公司做类似企业网盘的东西，存储数据大概在6~7T左右，有没有好点的存储方案呢？我看腾讯云这边有COS、CFS等，我是从网站直接读取数据，推荐那个？有没有什么试用渠道呢？
浏览 961提问于2017-09-15
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
