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

如何在Angular 4中的指令元素之后创建元素

在Angular 4中,可以使用ViewContainerRefComponentFactoryResolver来在指令元素之后动态创建元素。

首先,需要在指令的构造函数中注入ViewContainerRefComponentFactoryResolver

代码语言:txt
复制
constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { }

然后,在指令的逻辑中,可以使用ViewContainerRefcreateComponent方法来创建组件,并将其附加到指令元素之后:

代码语言:txt
复制
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const componentRef = this.viewContainerRef.createComponent(componentFactory);

其中,MyComponent是要创建的组件类。

如果想要在指令元素之后创建普通的HTML元素,可以使用Renderer2来实现:

代码语言:txt
复制
import { Renderer2, ElementRef } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) { }

...

const newElement = this.renderer.createElement('div');
this.renderer.appendChild(this.el.nativeElement.parentNode, newElement);

这样就可以在指令元素之后创建一个<div>元素。

总结一下,在Angular 4中,在指令元素之后创建元素的步骤如下:

  1. 在指令的构造函数中注入ViewContainerRefComponentFactoryResolver
  2. 使用ViewContainerRefcreateComponent方法来创建组件,并将其附加到指令元素之后。
  3. 使用Renderer2来创建普通的HTML元素,并将其附加到指令元素之后。

这样就可以在Angular 4中的指令元素之后创建元素。

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

相关·内容

Angular动态创建元素一些坑

在html文件中 用ngFor 动态生成子html 元素自定义属性,比如data-title ,发现angular报错,不让用 。解决办法:采用 attr.自定义属性名 即可 ?...实现拖拽功能 需要复制html元素 append到其他元素时 希望将原始html标签上 (click) 事件属性也一起复制,发现angular会自动将(click) 删除 ,无奈需要在ts里动态添加click...或者直接对对象onclick属性 绑定方法 ,此种做法可以使用父级this上方法 ?...angular在页面渲染时会为html元素自动增加属性 _ngcontent-c[数字] ,angular某些class样式和这类属性密切耦合影响页面样式 ;而在ts代码中动态复制html标签时该属性还没有生成...,动态复制html元素不会被再次渲染生成 _ngcontent-c[数字] 属性,因此复制html与原始html样式无法一致 。

2.4K20

Angular 中结构指令模式 - 它们是什么且怎么使用

Angular 中,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令Angular 中最强大特性之一,然而它们却频繁被误解。...如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构指令。这些指令可以添加、移除或者替换元素。...Angular 中我们什么时候需要用结构指令呢? 如果你想在 DOM 中添加或者移除一个元素时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。...甚至可以使用它们来创建一个之前不存在元素。 最好规则是:当我们正在考虑操作 DOM 时候,那么是时候使用结构指令了。

3.8K20

Angular快速学习笔记(3) -- 组件与模板

在正常 HTML 开发过程中,你使用 HTML 元素创建视觉结构, 通过把字符串常量设置到元素 attribute 来修改那些元素。...然后,用封装了 HTML 组件创建元素,并把它们当作原生 HTML 元素在模板中使用。 <!...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。...在 Angular 销毁指令/组件之前调用 OnInit钩子 使用 ngOnInit() 有两个原因: 在构造函数之后马上执行复杂初始化逻辑 在 Angular 设置完输入属性之后,对该组件进行准备...创建属性指令: ng generate directive highlight 编写代码,这个指令实现高亮元素: import { Directive, ElementRef } from '@angular

15.2K30

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

主要Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要库,angular.security...= null" [hero]="selectedHero"> 虽然这个模板使用了典型HTML元素和,但它也有一些不同之处。...HeroDetailComponent是HeroListComponent一个子项。 ? 注意是如何在原生HTML元素中合适存放。...它们倾向于以属性形式出现在元素标签内,有时候以名称形式出现,但更常见是作为赋值或绑定目标。 结构指令通过添加,删除和替换DOM中元素来改变布局。...属性指令会改变现有元素外观或行为。 在模板中,它们看起来像常规HTML属性,因此也就是名称。 实现双向数据绑定ngModel指令是一个属性指令例子。

7.9K30

Angular源码分析之$compile

$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关操作(指令作用域,控制器绑定以及transclude等),最终返回每个指令链接函数,并将所有指令链接函数合成为一个处理后链接函数...,完成指令解析,并生成合成之后链接函数,返回一个publicLinkFn函数,该函数完成根节点与根作用域绑定,并在根节点缓存指令控制器实例,最终执行合成链接函数。...随后,在返回compositeLinkFn中,则是遍历linkFns,针对每个链接函数,创建起对应作用域对象(针对创建隔离作用域指令创建隔离作用域对象,并保存在节点缓存中),并处理指令是否设置了...它会根据节点类型(元素节点,注释节点和文本节点)分别按特定规则处理,对于元素节点,默认存储当前元素标签名为一个指令,同时扫描元素属性和CSS class名,判断是否满足指令定义。...在返回nodeLinkFn中,根据用户指令定义,如果指令带有隔离作用域,则创建一个隔离作用域,并在当前dom节点上绑定ng-isolate-scope类名,同时将隔离作用域缓存到dom节点上; 接下来

1.5K50

Angular学习笔记(一)

@Component 装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。...@Component 配置项包括: selector - CSS 选择器,它告诉 Angular 在父级 HTML 中查找标签,创建并插入该组件。...指令 Angular 模板是动态。当 Angular 渲染它们时,它会根据指令提供操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:值、函数,或应用所需特性。...这个目标可能是(元素 | 组件 | 指令)property、(元素 | 组件 | 指令)事件,或(极少数情况下) attribute 名。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。

3.3K20

angular面试题及答案_angular面试

ngOninit:初始化指令或组件,在angular第一次显示展示组件绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...指令分类 组件:用于构建UI组件,继承于Directive类 属性指令:用于改变组件外观或行为 ngClass ngStyle 结构指令:用于动态添加或删除DOM元素来改变DOM布局 ngIf ngFor...组件和指令区别 component使用注解@Component修饰,directive使用注解@Directive修饰 component是组件化思想,基于组件创建应用,把应用划分成细小可重复利用组件...,而directive用来在已经存在DOM元素上实现一些行为 component是可重复使用组件,directive是可重复使用行为 component可创建一个view,即template或templateUrl...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件输入属性之后,初始化指令、组件 所以从angular生命周期看,constructor是执行在先 所以既然ngOnchanges

10.9K120

2-进军 angular1.x 表达式和指令

tips 每个页面只有一个 ng-app 指令,多不起作用 1.ng-app是一个特殊指令,一个HTML文档只出现一次,出现多次也只有第一个起作用;ng-app可以出现在html文档任何一个元素上...ng-init 指令初始化应用程序数据。 ng-model 指令元素值(比如输入域值)绑定到应用程序。...创建自己 指令 除了 AngularJS 内置指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义指令。...}; }); script> body> 复制代码 Tips 我们可以通过很多种来调用我们刚刚创建 指令 //元素名 runoob-directive> //...(这里指令我们可以理解为 一个我们自己创建带有特殊指令元素) 限制使用 var app = angular.module("myApp", []); app.directive("runoobDirective

2.4K20

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

同样,应用程序所有依赖关系通常仅在模块中定义。 26.我们可以在哪种类型组件上创建自定义指令Angular支持创建以下内容自定义指令元素指令 -当遇到匹配元素时,指令将激活。...当您尝试将对象创建逻辑与使用对象逻辑分开时,依赖注入概念会派上用场。“ config”操作使用DI,在加载模块以检索应用程序元素时,必须预先配置DI。...Karma Angular Mocks Mocha Browserify Sion 38.如何在Angular创建服务?...它表示Angular应用程序元素,通常在或标签附近声明。在HTML文档中可以定义任何数量ng-app指令,但是只有一个Angular应用程序可以被隐式地正式引导。其余应用程序必须手动引导。...可以使用ng-hide指令与控制器一起轻松隐藏HTML元素,以在单击按钮时隐藏HTML元素

41.1K51

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

一、Overview angular 入坑记录笔记第二篇,介绍组件中相关概念,以及如何在 angular 中通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...(非必须) 当通过命令行创建一个新组件之后,会自动将新创建组件注册到应用根模块(app.module.ts)中 ?...(refMsgInput.value)"> 通过模板引入变量方式获取到输入值:{{refMsg}} 4.2、指令 4.2.1、属性型指令 属性型指令被应用在视图 dom 元素上,用来改变...4.2.2、结构型指令 结构型指令用来操作 dom 树,通过进行一些逻辑判断,从而完成对于页面布局修改 NgIf:根据表达式值(true or false)来创建或者销毁 dom 元素 NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示在页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素

15.8K30

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

VSCode设计器:用于自定义Angular 框架下WijmoJS 组件 Web在线设计器,用于创建和自定义wijmoJS 控件 VSCode设计器 此设计器是VSCode扩展。...新React / Redux加密货币跟踪应用程序 本次更新为使用React和Redux WijmoJS 控件集增加了加密货币跟踪应用程序,该应用程序是一个财务仪表板,可用于跟踪加密货币值,这些值是在用户开发生产应用程序之后建模...WijmoJS 在本次更新中为Vue V2支持增加了很多不错功能。比如,WijmoJS 子组件现在可以在动态场景中正确工作,例如v-for和v-if指令。...与顶级组件互补子组件,定义FlexGrid列wjc-flex-grid-column组件,作为它们所代表WijmoJS 类包装器。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。

7K20

AngularDart4.0 指南- 模板语法二 顶

幸运是,Angular NgModel指令是一个使元素形成双向绑定桥梁。 内置指令 早期版本Angular包含了七十多个内置指令。 社区贡献了更多,并且为内部应用程序创建了无数私人指令。...在Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...它们通常应用于元素,就好像它们是HTML属性一样,因此也就是名称。 属性指令指南中介绍了许多细节。 许多Angular包(Router和Forms包)都定义了自己属性指令。...NgSwitch:只显示多个可能元素一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中元素。 在此示例中,将指令绑定到条件表达式,isActive。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表中每个英雄创建一组新元素和绑定。 在“结构指令”指南中了解微语法。

29.9K20

JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

JavaScript框架,Angular.js,Ember.js或React.js,给你代码带来结构,并保持其有序化,从而使您你app更灵活,更具可扩展性,并更容易开发。 ?...Angularjs优缺点 优点: 创建自定义文档对象模型(DOM)元素。 简单UI设计和更改。 在HTML文档中创建输入字段时,将为每个已渲染字段创建单独数据绑定。...Angular倾向于在重新渲染之前检查页面上每个单个绑定字段任何变化。 依赖注入。 简单路由。 易于测试代码。 此框架利于HTML语法扩展,并通过指令创建可重用组件。...对于具有许多交互元素页面,Angular变得缓慢。 原始设计往往很慢。 由于许多DOM元素,性能方面有问题。 复杂第三方集成。 陡峭学习曲线。 范围很容易使用,但很难调试。 路由受限。 注意。...这需要深入了解所考虑每个框架优点和缺点,以及它们如何在不同用例下竞争。所有框架都有很多共同点:开源,在许可证下发布,并创建具有MVC设计模式SPA。它们都有视图,事件,数据模块和路由。

12.6K60

angular基础面试题_java web面试题

], 本模块向全局服务中贡献那些服务创建器。...}) 在 Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性型指令 — 改变元素、组件或其它指令外观和行为指令...ngDoCheck:检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应,在ngOnChnages之后 ngAfterContentInit:当 Angular 把外部内容投影进组件视图或指令所在视图之后调用...,在ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令内容之后调用,在ngAfter...之后调用 ngAfterViewInit:当...Angular 初始化完组件视图及其子视图或包含该指令视图之后调用。

13K50

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

Angular 2组件/指令具有生命周期事件,是由@angular/core管理。@angular/core会创建组件,渲染它,创建并呈现它后代。...#FormatImgID_0# 2、事件发射器如何在Angular 2中工作? Angular 2不具有双向digest cycle,这是与Angular 1不同。...简而言之,EventEmitter是在@ angular/core模块中定义类,由组件和指令使用,用来发出自定义事件。 3、如何优化Angular 2应用程序来获得更好性能?...Shadow DOM通过提供了更好关注分离,通过其它HTML DOM元素实现了更少样式与脚本冲突。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

4.1K80

AngularDart 4.0 高级-生命周期钩子 顶

组件有一个由Angular自己管理生命周期。 Angular创建它,渲染它,创建和渲染它子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。...组件生命周期挂钩 指令和组件实例生命周期与Angular创建,更新和摧毁它们一样。...ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...SpyDirective可以使用ngOnInit和ngOnDestroy挂钩创建或销毁它探测元素。...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们间谍指令

6.1K10
领券