首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 6:给定ElementRef,我能得到ViewContainerRef吗

在Angular 6中,可以通过ElementRef来获取ViewContainerRef。ElementRef是Angular提供的一个用于访问宿主元素的引用的类,而ViewContainerRef是用于管理动态组件的容器。

要获取ViewContainerRef,可以使用以下代码:

代码语言:typescript
复制
import { Component, ElementRef, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div #container></div>
  `
})
export class ExampleComponent {
  @ViewChild('container', { read: ViewContainerRef }) containerRef: ViewContainerRef;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const nativeElement = this.elementRef.nativeElement;
    const containerElement = nativeElement.querySelector('[#container]');
    this.containerRef = containerElement;
  }
}

在上面的代码中,我们使用@ViewChild装饰器来获取名为"container"的元素的引用,并将其类型设置为ViewContainerRef。然后,在ngAfterViewInit生命周期钩子中,我们通过elementRef.nativeElement来获取宿主元素的原生DOM对象,并使用querySelector方法来获取名为"container"的子元素。最后,将获取到的容器元素赋值给containerRef。

通过这种方式,我们可以使用ElementRef来获取ViewContainerRef,从而实现对动态组件的管理和操作。

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Angular ViewChild和ViewChildren

    ViewChild Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配的元素。ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。...现在我们先来更新一下 AuthFormComponent 组件(关于它的出身,可以浏览 “Angular 内容投影” 这篇文章),即把下面的消息提示封装为组件。...为了获取多个匹配的元素,我们需要更新一下 AuthFormComponent 模板,即新增两个 AuthMessageComponent 组件: @Component({ selector: 'auth-form...为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。

    2.7K20

    浅谈Angular

    1.准备工作: ①全局安装 Angular CLI。...结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case来控制元素的显隐 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef...3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器 如果要通过指令控制DOM的显隐,需要在指令内部获取到宿主元素和承载宿主元素的容器,通过依赖注入templateRef和ViewContainerRef...从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是在跨页面中, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性...参考网址: https://www.angular.cn/guide/quickstart

    4.4K10

    Angular 2 + 折腾记 :(9) 初步了解指令,及动手一步一步写个自定义指令

    前言 指令这种东西,可以加强用户体验,减少一些重复工作; 跟着来实现一个悬浮链接打开的指令 ---- 效果图 ?...判断传入的内容是否为url 创建一个悬浮tooltip 把对应的内容填充进去且可以访问跳转 ---- 实现的指令代码 import { Directive, // 创建一个指令必须依赖这个装饰器 ElementRef..., // 获取原生dom的 Input, // 接收外部数据的 Renderer2, // 渲染相关的(v4+),angular2.x 用的是Renderer(v4里面依旧标记不赞成deprecate...),两者大同小异,具体看手册API的变动 HostListener, // 监听事件 } from '@angular/core'; @Directive({ selector: '[appHoverText...[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?

    46310

    Angular 17 有什么新功能?

    时) Write(如果要写入 DOM,则需要,例如,使用第三方库初始化图表) MixedReadWrite(默认值,但应尽可能避免使用更具体的阶段) Read(如果您只需要阅读 DOM,则推荐使用) 认为在大多数情况下...: ElementRef; constructor() { afterNextRender(() => { const ctx = this.canvas.nativeElement...还值得注意的是,变化检测算法已得到改进,以便在使用信号时更加高效。...对这个API不是很熟悉, 但是这个网站上有一篇关于它的精彩文章 developer.chrome.com 很酷的演示(当然,使用支持此 API 的浏览器打开它)。...provideHttpClient({ withHttpTransferCacheOptions({ includePostRequests: true }) }) }); 开发工具 devtools也得到了一些喜爱

    65730

    Angular8稳定版修改概述

    下面是对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本。 新功能 差分加载 根据您的browserlist 文件,在构建期间,Angular将为其创建单独的包polyfills。...Ivy渲染引擎实验 虽然早在angular 6的时候就提出了Ivy,但是Ivy仍处于试验阶段,通过Angular 8版本,您可以通过创建一个enable-ivy标志设置为true 的应用程序来测试它,如下所示...最喜欢的:你可以调试模板(确信很多开发人员需要这个功能)。 Bazel支持 Bazel是谷歌开源的另一款工具,“我们不喜欢谷歌”。...认为这是gulp/grunt“旧时代”中的命令。 基本上,构建器只是一个带有一组命令的函数,您可以createBuilder()从@angular-devkit/architect包传递给方法。...: ElementRef; // If you need to access it in ngOnInt hook @ViewChild(TemplateRef, { static: true }) foo

    4.5K20

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

    在本文中,将介绍 Angular 8 和 Angular CLI 8 的最重要的新功能。在文中的例子可以在 GitHub 上找到。...在一切正常的前提下,能够得到明显更小的 bundles 应该就足够了。...hello world 程序的 Bundle 大小(来源:由Brad Green和Igor Minar撰写的 ngconf 2019 主题演讲) 感谢差异加载(如下所示),bundle 大小已经可以立即得到优化...为了说明这个新功能,将通过实现所谓的 “n 皇后问题”的 JavaScript 进行说明。这个想法是在棋盘上每行放一个皇后,而不能相互公鸡。这意味着在同一行、列或对角线中不能有其他皇后。...由于这种行为十分令人困惑,所以现在组件必须指定何时应该进行解决: 1@ViewChild('info', { static: false }) 2 paragraph: ElementRef; 如果

    3K30
    领券