从组件获取ViewContainerRef
是指在Angular框架中，通过编程方式获取一个组件的视图容器引用。ViewContainerRef是一个抽象类，用于管理动态组件的创建、插入和移除。
ViewContainerRef可以通过以下方式获取：
- 在组件类中注入ViewContainerRef实例：
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<ng-template #container></ng-template>
`
})
export class MyComponent {
@ViewChild('container', { read: ViewContainerRef }) containerRef: ViewContainerRef;
constructor(private viewContainerRef: ViewContainerRef) { }
}- 在模板中使用模板变量获取ViewContainerRef实例：
<ng-template #container></ng-template>
<app-my-component #myComponent></app-my-component>
<button (click)="getContainerRef(myComponent.containerRef)">获取ViewContainerRef</button>import { Component, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<ng-template #container></ng-template>
`
})
export class MyComponent {
@ViewChild('container', { read: ViewContainerRef }) containerRef: ViewContainerRef;
}
@Component({
selector: 'app-root',
template: `
<app-my-component #myComponent></app-my-component>
<button (click)="getContainerRef(myComponent.containerRef)">获取ViewContainerRef</button>
`
})
export class AppComponent {
getContainerRef(containerRef: ViewContainerRef) {
// 使用获取到的ViewContainerRef进行操作
}
}ViewContainerRef的主要作用是：
- 动态创建组件：可以使用ViewContainerRef的createComponent方法动态创建组件，并将其插入到视图中。
- 动态插入和移除组件：可以使用ViewContainerRef的insert方法将已创建的组件插入到指定位置，使用remove方法将组件从视图中移除。
- 获取视图的位置：可以使用ViewContainerRef的indexOf方法获取组件在视图中的位置索引。
ViewContainerRef的应用场景包括但不限于：
- 动态表单：根据用户的操作动态添加或移除表单字段。
- 模态框：动态创建和显示模态框组件。
- 动态组件加载：根据条件动态加载不同的组件。
腾讯云相关产品和产品介绍链接地址：
- 云函数 SCF（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
- 云原生容器服务 TKE（Tencent Kubernetes Engine）：https://cloud.tencent.com/product/tke
- 云数据库 CDB（Cloud Database）：https://cloud.tencent.com/product/cdb
- 云服务器 CVM（Cloud Virtual Machine）：https://cloud.tencent.com/product/cvm
- 云存储 COS（Cloud Object Storage）：https://cloud.tencent.com/product/cos
- 人工智能平台 AI Lab：https://cloud.tencent.com/product/ailab
- 物联网平台 IoT Explorer：https://cloud.tencent.com/product/ioe
- 移动开发平台 MDP（Mobile Development Platform）：https://cloud.tencent.com/product/mdp
- 区块链服务 BaaS（Blockchain as a Service）：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我正在尝试将组件附加/创建到特定的div中。但是，组件正在创建中，但不是我想要的位置。我哪里做错了？ ? 我希望k-sidebar组件位于我在图像中显示的div中。 下面是我的代码。 App.component import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Renderer2, ViewContainerRef,
ComponentFactoryResolver, ComponentRef, ComponentFactory} from '@angular/core';
@Compo
浏览 16提问于2020-04-06得票数 0
2回答
角-@查看子从我的模块
、、、、
我的问题是关于角2/4/5模块。
无法使@ViewChild在从模块中使用它时工作，子程序未定义。在我把它作为一个简单的组件使用之前，它运行得很好。试过@ViewChildren也..。相同的
代码样本-
app.module.ts -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MyNewModule} from './modules/MyNewModule/MyNewModul
浏览 3提问于2017-12-22得票数 2
回答已采纳
如何以编程方式实例化组件并将其插入模板中指定的位置？
Stackblitz：
import {Component, ComponentFactoryResolver, TemplateRef, ViewChild, ViewContainerRef, Type} from "@angular/core";
export interface PaneOptions {
component: Type<any>;
params?: any;
}
@Component({
selector: 'app-manager',
templat
浏览 4提问于2020-01-09得票数 0
回答已采纳
我有一个动态加载的组件。 代码如下： app.component.ts @ViewChild(InjectDirective, { static: true }) injectComp!: InjectDirective;
componentFactory: any;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
add(): void {
this.componentFactory = this.compon
浏览 31提问于2021-09-28得票数 0
回答已采纳
我想要创建一个动态组件并在运行时插入其他组件。
我使用来解决这个问题：
import { MyComponent } from "./component-path";
@Component({
template: `<ng-template #container></ng-template>`
})
export class GeneralDataComponent implements OnInit {
@ViewChild('container', { read: ViewContainerRef }) c
浏览 0提问于2018-03-08得票数 1
回答已采纳
下面是使用动态组件创建的StackBlitz上的两个MCVEs。我想知道为什么：
工作。
但是不能工作，只是在将一个物质模块(MatButtonModule)导入到动态创建的模块之后。
有谁有主意吗？
起作用的例子
app.component.ts
import { Component, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef, ViewChild, ViewContainerRef, Input, Compiler, Injector, NgModuleRef, SimpleChanges, NgModule
浏览 0提问于2018-11-11得票数 1
回答已采纳
2回答
我要删除子组件，父只会删除最后一个子组件，然后显示索引来自hostView -1，不能从视图中删除子组件。
这是我的孩子观
<button (click)="remove_me()" >I am a Child {{unique_key}}, click to Remove
</button>
这是我的孩子部件
import { Component } from '@angular/core';
import { ParentComponent } from '../parent/parent.component';
@
浏览 8提问于2022-12-03得票数 0
为了个人的需要和乐趣，我正在开发一个小的UI组件框架。我正在开发一个Tab组件，为了测试目的，我需要在另一个组件(TabComponent)中动态注入一个组件(TabComponent)。下面是我的两个组件的代码：
tab.component.ts:
import {Component, ContentChildren} from "@angular/core";
import {TabContainerComponent} from "./tabContainer.component";
@Component({
selector: 'tab
浏览 0提问于2018-07-24得票数 13
2回答
动态清晰度应用程序级别警报
、、、、
我正在使用，并试图使用动态组件加载来实现动态应用程序级警报。我以前也遵循过这种模式，但我似乎无法让它与清晰的警报一起工作。
app.component.ts
import { AfterViewInit, Component, ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
import { ClrAlert } from '@clr/angular';
import { AlertsHostDirective } from './directives/ale
浏览 0提问于2018-02-08得票数 1
回答已采纳
2回答
在我的Angular 4应用程序中，我需要动态创建两个组件并将它们注入到模板中。我已经用一个组件成功地做到了这一点，但现在我需要添加另一个组件。
我有这个指令：
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[component-host]',
})
export class ComponentHost {
constructor(public viewContainerRef: ViewContainerRef) { }
}
我
浏览 1提问于2017-08-04得票数 0
1回答
我对角质还不熟悉。我有一个按钮，每当我点击它，它就会动态地创建一个组件。我需要每个组件有一个按钮或东西，可以摧毁该组件的具体。我在动态组件中有一个函数，当我单击它时，这个组件必须关闭，但是我不知道如何将它传递给类型记录file.Please帮助我的函数。
app.component.ts
import { Component, OnInit, ComponentFactoryResolver, ViewChild, Input,ComponentRef,ViewContainerRef } from '@angular/core';
import {ChatService} f
浏览 1提问于2019-11-04得票数 5
回答已采纳
我正在尝试显示一个与angular文档中的示例类似(不精确)的动态组件。
我有一个viewContainerRef的动态指令
@Directive({
selector: '[dynamicComponent]'
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
摘录自组件代码
@ViewChild(DynamicComponentDirective) adHost: DynamicComponentDire
浏览 3提问于2018-01-19得票数 26
在我的项目中，我想作为父容器的子容器动态地插入组件。这是代码
import { Component, ViewContainerRef, ComponentFactoryResolver, ViewChild } from '@angular/core';
@Component({
selector: 'parent',
template: `
<ng-container>
<child1></child1>
<button (click)="me()">me</button
浏览 4提问于2017-08-01得票数 4
回答已采纳
我看到了一些使用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
我有两个组件。
父组件的.html代码如下：
<div class="space">
<ng-container *ngFor="let item of items">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{item: item}">
</ng-container>
</ng-container>
</di
浏览 28提问于2020-05-07得票数 0
回答已采纳
我想知道从动态添加的组件调用宿主组件中声明的greet()方法的正确方式
src/app/app.component.ts
import {
Component,
ViewChild,
ComponentFactoryResolver,
ViewContainerRef,
} from '@angular/core';
import { OneComponent } from './application/one/one.component';
import { TwoComponent } from './application/tw
浏览 19提问于2021-02-17得票数 0
回答已采纳
3回答
我正在使用动态组件，我遵循这个并很好地工作。
这是我的实现
dynamic-component.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[DynamicComponent]'
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
这
浏览 4提问于2021-04-26得票数 2
我已经使用这里描述的动态组件方法创建了一个选项卡界面：。
我的问题是-当一个组件处于隐藏状态时，如何维护它的状态？
我在支持中添加了一些代码
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[tabs]'
})
export class TabsDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
模板
<div id="t
浏览 0提问于2018-07-17得票数 0
这是我的parent.html
parent.html
<h1>Test for dynamic component</h1>
<button (click)="addBox('BoxOneComponent')">AddBoxOne</button>
<button (click)="addBox('BoxTwoComponent')">AddBoxTwo</button>
<div>
<ng-template #parent
浏览 3提问于2017-08-25得票数 1
我希望动态创建一个具有动态模板的组件，以便在动态组件的上下文中解析该模板的内插。
我知道我可以使用这段代码创建一个动态组件(必须在模块上的entryComponents中提到)：
我的静态组件：
@Component({
selector: 'html-type',
template: `<ng-template #htmlcontrolcomponent></ng-template>`
})
export class HtmlTypeComponent implements AfterViewInit{
@ViewChild('h
浏览 4提问于2020-05-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
