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

在Angular 4中,如何重新注入从模板创建的组件

在Angular 4中,重新注入从模板创建的组件可以通过以下步骤实现:

  1. 首先,在需要重新注入组件的地方,引入ComponentFactoryResolverViewContainerRef
代码语言:txt
复制
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
  1. 在组件的构造函数中注入ComponentFactoryResolverViewContainerRef
代码语言:txt
复制
constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) { }
  1. 创建一个方法来重新注入组件。在该方法中,首先使用ComponentFactoryResolver获取要注入的组件的工厂:
代码语言:txt
复制
reinjectComponent() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourComponent);
}

其中,YourComponent是要重新注入的组件的类名。

  1. 接下来,使用ViewContainerRefclear()方法清除当前容器中的所有组件:
代码语言:txt
复制
this.viewContainerRef.clear();
  1. 最后,使用ViewContainerRefcreateComponent()方法将组件工厂创建的组件添加到容器中:
代码语言:txt
复制
const componentRef = this.viewContainerRef.createComponent(componentFactory);

这样就成功重新注入了从模板创建的组件。

重新注入组件的应用场景包括动态组件加载、模态框、动态表单等。

腾讯云相关产品中,与Angular 4开发相关的产品包括云服务器CVM、云数据库MySQL、云存储COS等。您可以通过腾讯云官方网站了解更多关于这些产品的详细信息和使用指南。

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

相关·内容

Angular学习笔记(一)

组件 组件负责控制视图,通过一些由属性和方法组成 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个类。...@Component 配置项包括: selector - CSS 选择器,它告诉 Angular 父级 HTML 中查找标签,创建并插入该组件。...templateUrl - 组件 HTML 模板模块相对地址。 providers - 组件所需服务依赖注入提供商数组。...数据绑定 Angular 支持数据绑定,一种让模板各部分与组件各部分相互合作机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。...依赖注入 大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需服务。 2.

3.3K20

AngularDart4.0 指南-体系结构概述 顶

模板是一种HTML形式,告诉Angular如何呈现组件模板看起来像普通HTML,除了一些不同之处。...添加绑定标记到模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - DOM到DOM,或者两个方向。..._heroService); 当Angular创建一个组件时,它首先要求一个注入器来提供组件需要服务。 注入器维护一个先前创建服务实例容器。...简而言之,您必须事先在注入器中注册HeroService提供者。 提供者是可以创建或返回服务东西,通常是服务类本身。 无论应用程序组件树中级别如何,您都可以引导期间或组件中注册提供程序。...关于依赖注入要点: 依赖注入连接到Angular框架,并在任何地方使用。 注入器是主要机制。        注入器维护它创建服务实例容器。        注入器可以提供者创建服务实例。

7.9K30

【17】进大厂必须掌握面试题-50个Angular面试

顾名思义,它们控制数据如何服务器流到HTML UI。 10. Angular范围是什么? Angular范围是一个引用应用程序模型对象。它是表达式执行上下文。...Angular中,数据绑定是最强大,最重要功能之一,可让您定义组件与DOM(文档对象模型)之间通信。它从根本上简化了定义交互式应用程序过程,而不必担心视图或模板组件之间推送和提取数据。...28.什么是Angular依赖注入? 依赖注入(DI)是一种软件设计模式,其中对象作为依赖关系传递,而不是组件中对其进行硬编码。...## 30.组件和指令生命周期挂钩是什么? Angular组件具有离散生命周期,其中包含出生到死亡过渡不同阶段。...Angular中,服务是可替换对象,该对象使用依赖项注入连接在一起。通过将服务注册到要在其中执行模块中来创建服务。基本上,您可以通过三种方式创建角度服务。

41.1K51

Angular 16 正式版发布

之前Angularv15中,Angular团队通过将独立API开发者预览版升级至稳定版,Angular简易性和开发者体验方面达到了一个重要里程碑。...对于执行手动 DOM 操作组件模板中使用 ngSkipHydration 属性逐步采用 hydration。...3.1 独立ng new集 作为 Angular v16 一部分,你可以一开始就创建一个新独立项目,要尝试独立 APIs 原理图开发预览版,请确保你 Angular CLI v16 上并运行:...3.4 自动完成模板导入 你使用模板组件或管道 CLI 或语言服务中获得错误次数是多少次,而实际上没有导入相应实现?我猜应该是很多次。语言服务现在允许自动导入组件和管道。...备受要求功能 ,允许你对 Angular 模板组件使用自闭标签,这是一个小开发体验改进,可以为你节省一些打字时间。

2.5K10

Angular 2 架构(上)

(Data Binding) 6、指令 (Directives) 7、服务 (Services) 8、依赖注入 (Dependency Injection) 下图展示了每个部分是如何相互工作: 图中模板...exports - 声明( declaration )子集,可用于其它模块中组件模板 。 imports - 本模块组件模板中需要由其它导出类模块。 providers - 服务创建者。...组件是构成 Angular 应用基础和核心,可用于整个应用程序中。 组件知道如何渲染自己及配置依赖注入组件通过一些由属性和方法组成 API 与视图交互。...创建 Angular 组件方法有三步: @angular/core 中引入 Component 修饰器 建立一个普通类,并用 @Component 修饰它 @Component 中,设置 selector...我们可以通过使用模板来定义组件视图来告诉 Angular 如何显示组件

1.4K10

Angular快速学习笔记(2) -- 架构

,一旦模板 HTML 中找到了这个选择器对应标签,就创建并插入该组件一个实例。...providers 是当前组件所需依赖注入提供商一个数组,组件需要用到service,需要在这里提供 1.2.2 模板与视图 模板就是一种 HTML,它会告诉 Angular 如何渲染该组件。...Angular 每个 JavaScript 事件循环中处理所有的数据绑定,它会组件根部开始,递归处理全部子组件。 ?...1.3 服务与依赖注入(DI) 对于与特定视图无关并希望跨组件共享数据或逻辑,可以创建服务类。 服务类定义通常紧跟在 “@Injectable” 装饰器之后。...如何使用: Angular 中,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入组件中 使用 @Injectable 装饰器来表明一个组件或其它类

5.2K20

Angular 6.x 快速入门

Angular 中,我们可以通过 Component 装饰器和组件类来创建自定义组件。...基础知识 定义组件元信息 Angular 中,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件... ngFor 指令简介 该指令用于基于可迭代对象中每一项创建相应模板。它与 AngularJS 1.x 中 ng-repeat 指令功能是等价。...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

Angular2 之 结构型指令几个概念

Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。...组件原本要做哪些事情仍然进行!它还是占用着那么多资源。 另外一方面,重新显示这个组件会很快。 组件以前状态被保留着,并随时可以显示。...angularDOM中移除该元素,停止相关组件变更检测,把它从DOM事件中移除,并且销毁组件组件会被垃圾回收,并释放内存。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular重新创建组件及其子树。angular重新运行每个组件初始化逻辑。...总结 基于上面的利弊分析,无论是我们使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。

3K20

AngularDart4.0 指南 原

指南 了解Angular基础知识,如本地开发 安装, 显示数据和接受用户输入,构建简单表单, 将应用程序服务注入组件中,以及使用Angular模板语法。...英雄之旅让您逐步安装到全功能示例,演示了专业应用程序基本特征:合理项目结构,数据绑定,主/细节,服务,依赖注入,导航和远程 数据访问。     3. 查看整体架构图。    ...4.阅读数据显示以查看数据绑定是否屏幕上放置组件属性值。     5.阅读用户输入,了解如何响应用户启动DOM事件。    ...6.阅读表单,其中涵盖用户界面中数据输入和验证。     7.阅读依赖注入,了解如何从小型单用途零件构建大型,可维护应用程序。    ...8.扫描模板语法, AngularHTML模板综合研究。

2.7K20

Angular 1 vs. Angular 2 深度比较

改进堆栈跟踪 大幅提升性能 (以及原理) 改进模块化 改进依赖注入 Web 组件友好 (如何达成以及原理) 支持影子 DOM 支持 Android 和 iOS 原生移动渲染...目标: 改进依赖注入 Angular 1 世界里,依赖注入构建多模块应用时是一项技术飞跃, 但是一些极端案例中,如果不做出一些重要变化是不能解决这些问题。...Angular 1 多重依赖注入机制 Angular 1 中, 我们可以使用在多重地方使用不同方法进行注入链接方法中通过位置注入 直接定义中通过名字注入 controller方法中通过名字...同时这种依赖注入器是类似层级结构,不同层次组件树,有可能实现对相同类型不同实现。 如果一个组件没有定义依赖,它会代理给上层注入器查找依赖,依次往上。...结论 我真的为 Angular 2 感到兴奋,尝试几个组件之后,我可以看到它是如何简单易学,对开发者更加透明。很多事情就像这个文章前面说过,像 Zones 很容易使用。

2.8K100

Angular2 VS Angular4 深度对比:特性、性能

这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台应用程序,解决了移动应用程序(功能,加载时间等)挑战后,Angular2可以更容易处理桌面组件。...依赖注入模块化开发和元素隔离方面非常有帮助,但它实现一直受到Angular 1.x困扰。Angular2解决了这个问题,另外还添加了一些缺少功能,如子注入以及生命周期/范围控制。...动态载入: 这是之前Angular版本均不具备功能,Angular2包含了这个功能,即使开发人员忙碌时,也能够添加新指令或控件。 模板Angular2中,模板编译过程是异步。...这些修改促使视图部分生成代码大小减少了大约60%。模板越是复杂,节省就越多。 动画包: Angular4开发人员将动画Angular核心部分提取出来,并将它们放在独立包中。...模板源映射: 每当模板某些内容出现错误时,都将创建源映射,为原始模板提供有意义说明内容。 结论: 对于仍处于学习阶段的人来说,Angular会有点混乱。

8.7K20

进阶 | 重新认识Angular

Dom-based 模板技术 基于Domlink或compile过程: Dom-based模板技术事实上并没有完整parse过程(先抛开表达式不说),如果你需要从一段字符串创建出一个view,...---- 什么是依赖注入 依赖注入项目中,体现为项目提供了这样一个注入机制: 有人负责提供服务,有人负责消耗服务,而这样机制提供了中间接口,并替使用者进行了创建并初始化这样处理。...而Angular某种程度上替我们做了这样工作,并提供我们使用。 Angular里面我们常常通过服务来共享一些状态,而这些管理状态和数据服务,便是通过依赖注入方式进行处理。...一个Angular应用是一个组件树,同时每个组件实例都有自己注入器,组件树与注入树平行。...上面也说道,并不是所有的组件都会注入服务,所以有了”注入器冒泡”: 当一个组件申请获得一个依赖时,Angular先尝试用该组件自己注入器来满足它。

2.5K10

前端人员该怎么面试 经典Angular面试题有哪些

Angular 2组件/指令具有生命周期事件,是由@angular/core管理。@angular/core会创建组件,渲染它,创建并呈现它后代。...当@angular/core数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...Angular 2不具有双向digest cycle,这是与Angular 1不同Angular2中,组件中发生任何改变总是当前组件传播到其所有子组件中。...简而言之,EventEmitter是@ angular/core模块中定义类,由组件和指令使用,用来发出自定义事件。 3、如何优化Angular 2应用程序来获得更好性能?...它们之间唯一区别是:service方法用于注入结果通常是new出来对象,factory方法注入结果通常是一系列functions; provider是创建服务最为复杂方法,除非你需要创建一个可以复用代码段并且需要进行全局配置

4.1K80

AngularDart4.0 英雄之旅-教程-07路由 顶

这个举动创建了一个单例HeroService实例,可用于应用程序所有组件Angular注入HeroService,您可以DashboardComponent中使用它。...构造函数中注入HeroService,并将其保存在一个专用_heroService字段中。 调用服务来获取Angular ngOnInit()生命周期钩子中英雄。...templateUrl元数据指向您刚刚创建模板文件。...警告模板中使用Angular管道之前,需要将其列组件@Component注解pipes参数中。 您可以单独添加管道,或者为了方便起见,可以使用COMMON_PIPES组。...你走过路 以下是您在此页面中所取得成果: 您添加了Angular路由器来浏览不同组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择英雄细节。

17.5K30

Angular系列教程-第五节

1.模块 NgModule 是一个带有 @NgModule 装饰器类。 @NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...bootstrap —— 根组件Angular 创建它并插入 index.html 宿主页面。 该模块 declarations 数组告诉 Angular 哪些组件属于该模块。...当你创建更多组件时,也要把它们添加到 declarations 中。 每个组件都应该(且只能)声明(declare)一个 NgModule 类中。...这些可声明类在当前模块中是可见,但是对其它模块中组件是不可见 —— 除非把它们当前模块导出, 并让对方模块导入本模块。...依赖注入 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入组件中。

2.9K20

Angular 入坑到挖坑 - 组件食用指南

一、Overview angular 入坑记录笔记第二篇,介绍组件相关概念,以及如何angular 中通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...4.1.2、模板绑定语法 angular 应用中,组件扮演着控制器或是视图模型作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础 angular 模板文件 在这个模板文件中...,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件属性值或者是模板数据通过模板表达式运算符进行计算...通过使用 $event 作为方法参数会将许多用不到模板信息传递到组件中,导致我们仅仅是为了获取数据前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到)与组件(应用如何去处理用户数据)...组件中使用服务 需要使用组件中引入服务,然后组件构造函数中通过依赖注入方式注入这个服务,就可以组件中完成对于这个服务使用 组件中对数据进行赋值,然后调用服务方法改变数据信息

15.8K30

Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

@NgModule接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。...它可以向应用依赖注入器中添加服务提供商。 Angular 模块化 模块是组织应用程序和使用使用外部程序库最佳途径。 很多Angular库都是模块,e.g....CrudModule,就可以在其组件模板中使用到出这些组件了。...那么我们提供服务地方就有多个: 可以组件中提供服务 可以模块创建中提供服务 组件中提供服务 组件中提供服务,它作用范围就仅仅局限于该组件以及其子组件。 e.g..../sino-file-list.component.css'], providers: [FileService], }) 模块创建中提供服务 模块创建中提供服务,可以该模块任何组建个中依赖注入然后使用

2.2K30

Angular 服务

不要使用 new 来创建此服务,而要依靠 Angular 依赖注入机制把它注入到 HeroesComponent 构造函数中。 服务是多个“互相不知道”类之间共享信息好办法。...组件中移除数据访问逻辑,意味着将来任何时候你都可以改变目前实现方式,而不用改动任何组件。 这些组件不需要了解该服务内部实现。 这节课中实现仍然会提供模拟英雄列表。...把它注入到 HeroService 中 重新打开 HeroService,并且导入 MessageService。...你注入器中把 HeroService 注册为该服务提供商,以便在别处可以注入它。 你使用 Angular 依赖注入机制把它注入到了组件中。...组件 ngOnInit 生命周期钩子中调用 HeroService 方法,而不是构造函数中。 你创建了一个 MessageService,以便在类之间实现松耦合通讯。

3.3K70

前端三大框架大杂烩

Virtual DOM:   提供了函数式方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此定义上保证了视图与数据同步。...整体趋势上来说,浏览器和手机还会越变越快,框架本身渲染性能在整个前端性能优化体系中,会渐渐淡化,更多优化点还是构建方式、缓存、图片加载、网络链路、HTTP/2 等方面 4、模块化与组件 Angular1...-> Angular2   Angular1使用依赖注入来解决模块之间依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。   React 认为组件才是王道,而组件是和模板紧密关联组件模板组件逻辑分离让问题复杂化了。...三、我们如何选?   年轻程序员都是好奇猫,玩过一个又一个前端框架。毛球上弄出一条条线,玩啊玩,最后这一个个框架在脑子里搅浆糊。

2.6K50
领券