如何在Angular 4中的指令元素之后创建元素
在Angular 4中，可以使用ViewContainerRef和ComponentFactoryResolver来在指令元素之后动态创建元素。
首先，需要在指令的构造函数中注入ViewContainerRef和ComponentFactoryResolver：
constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { }然后，在指令的逻辑中，可以使用ViewContainerRef的createComponent方法来创建组件，并将其附加到指令元素之后：
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const componentRef = this.viewContainerRef.createComponent(componentFactory);其中，MyComponent是要创建的组件类。
如果想要在指令元素之后创建普通的HTML元素，可以使用Renderer2来实现：
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中，在指令元素之后创建元素的步骤如下：
- 在指令的构造函数中注入
ViewContainerRef和ComponentFactoryResolver。 - 使用
ViewContainerRef的createComponent方法来创建组件，并将其附加到指令元素之后。 - 使用
Renderer2来创建普通的HTML元素，并将其附加到指令元素之后。
这样就可以在Angular 4中的指令元素之后创建元素。
相关·内容
1回答
将元素添加到数据表
angularjs、angular-datatables
我正在使用angular-datatables，想知道如何在已呈现的元素中添加各种元素，如按钮、文本输入等，并设置datatable。我认为这可以通过新的angular指令和链接函数来实现，例如： $('#table_wrapper div.top').append(some nice custom element)
此指令发
浏览 1提问于2015-09-04得票数 1
2回答
使用jQuery按类选择ng在角JS指令中创建的元素？
jquery、angularjs、events、angularjs-directive、traversal
我看过角度站点上的文档，但我还是有点困惑。据我所知，从答案中，我可以选择使用jqLite或angular.element()选择这些元素。我的jQuery包括在角度包含
浏览 1提问于2015-07-31得票数 3
回答已采纳
3回答
angular 6自定义元素指令
angular、angular2-directives
如何在angular 6中创建元素指令？我看到了如何创建一个属性指令，但是如果我想创建一个自定义元素呢？
浏览 0提问于2018-10-25得票数 0
1回答
当元素的“click”事件存在时，如何检测元素外部的单击
angular、events
我正在创建一个Angular指令，请帮助我如何在Angular(7)中检测'click‘元素和'click’外部元素的每个事件。@Hostlistener ('click', ['$event']) onClick(){} 用于单击元素(此处为按钮) @Hostlistener ('document:click', ['$event']
浏览 18提问于2019-04-23得票数 0
2回答
如何在Angular 4中的指令元素之后创建元素
javascript、jquery、angular、typescript
我在angularjs中有一个指令，它工作得很好，但是它使用了jQuery，现在我想把它转换成Angular 4app.directive('errName', functionspan></span></span>'); }); }它只是简单地检查加载图像中是否有错误，然后隐藏元素并创建一个spa
浏览 5提问于2017-08-09得票数 0
回答已采纳
1回答
在AngularJS中的指令元素后面插入另一个具有属性值或作用域模型的元素
angularjs、angularjs-directive、angularjs-scope
我想要创建一个指令，在用ng- <dt>指令创建的每个<dt>元素之后创建一个<dt>元素。如何将<dd>的内容设置为指令属性值或ng-重复作用域模型值？<dl>
<dt ng-repeat="item in items" insert-dd="{{ item.dd_vaue }}">
浏览 4提问于2013-09-06得票数 0
回答已采纳
2回答
用指令装饰HTML元素
angularjs、angularjs-directive
我正在调用一个返回HTML的API，其中包含一些code标记。angular.module('myApp')
return {编辑：我注意到日志与code元素一起工作，这些<e
浏览 4提问于2014-01-28得票数 1
回答已采纳
1回答
Angularjs -在属性add后为指令刷新tr
javascript、jquery、angularjs
基于：$(nRow)指的是元素。目前，在下面的代码中，没有发生任何事情，元素没有得到属性。如果删除replaceWith，就会得到带有属性的元素，但没有应用该指令。var row = angular.element($(nRow)).clone();
row.attr("tooltips", "")
浏览 0提问于2016-07-08得票数 0
回答已采纳
2回答
Angular 5-使用*ngFor创建HTML元素时如何调用函数
jquery、angular、html、angular5、ngfor
目前我在一个视图中工作，在这个视图中我必须动态创建HTML元素。如何在HTML元素就绪后立即触发函数？
提前谢谢。
浏览 4提问于2018-06-28得票数 2
1回答
用于添加功能的指令的angularjs模拟元素
angularjs
我使用angular js 1.0.3，并尝试测试我的指令。var def = '<input data-my-directive="" />';
var scope = $ro
浏览 1提问于2013-02-05得票数 0
回答已采纳
1回答
Angular2指令分配给模板
javascript、angular、angular2-directives
是否可以从指令中将视图分配给视图？import {Directive} from 'angular2/core';
selector: '[foo]'export class FooDirective{}<div foo>
bar value should be 'baz': {{bar}}.</div>
浏览 3提问于2016-05-14得票数 3
回答已采纳
1回答
使简单的DOM属性成为来自指令的单向绑定属性
javascript、angular、angular-directive
显然，我的目标是在使用angular指令之后，使<input type="text" placeholder="example" />元素看起来像<input type="text" [placeholder]="'example'" />
import { Directive, HostBinding } from '@angular
浏览 4提问于2018-02-22得票数 0
回答已采纳
1回答
生成html指令
angularjs
我正在创建一个指令，它将根据从服务器接收的数据自动生成HTML元素。; } return directive;})();
如您所见在angular.forEach运算符对parameters变量中的所有项进行迭代并加载所有DOM元素之后，除my-datepicker自定义指令</em
浏览 2提问于2015-11-22得票数 0
回答已采纳
2回答
Angularjs -在指令中获取主体元素
javascript、angularjs
如何在angular指令中获取body元素？我的目标是使用jquery $('body').innerWidth(); inside指令来做一些事情。我不想使用jquery，而是使用angular内置的jqlite实现。
浏览 0提问于2013-05-24得票数 20
回答已采纳
1回答
调用元素中的局部变量导致未定义错误
angularjs、custom-directive
我尝试创建以下指令 return { var tableHeaderEles = angular.element(element[0].querySelectorAll('th'));
浏览 5提问于2017-06-24得票数 0
1回答
焦点测试用例-角JS中的下一个自定义指令
angularjs、karma-jasmine、angular-directive
我创建了一个自定义指令来解决应用程序中与焦点相关的一些问题。，带有"idOfElementC“id的元素将略高于div。指令是如何工作的？首先，它将检查是否有id "idOfElementA“的
浏览 0提问于2018-08-06得票数 0
回答已采纳
1回答
带有jQuery UI的AngularJS指令-模板和元素
jquery、jquery-ui、angularjs
我正在尝试使用jQuery UI autoComplete插件创建一个自动完成文本输入的AngularJS指令。这是我的angular代码： angular.module('components', []).div> </div&
浏览 1提问于2012-12-18得票数 0
回答已采纳
1回答
Angular.js和SVG生成指令
javascript、angularjs、svg
我有一个指令，它引用一个包含一个简单SVG循环的模板，它将它添加到一个SVG元素中。如果我在默认情况下将相同的HTML放置到页面中，则圆圈将按预期呈现。有人知道问题出在哪里吗？
浏览 3提问于2014-07-26得票数 2
回答已采纳
2回答
angularjs指令中的$compile内部链接函数未按预期工作
angularjs、hyperlink、angularjs-directive、compilation
我尝试在angular中使用指令，但我在编程html元素中使用$compile函数时遇到了一些问题，这里称为"phe“。var phe = angular.element('<div style="background-color:orange">{{value}}</div>');
浏览 0提问于2015-05-16得票数 1
1回答
将自定义指令的属性传递给子元素的简单方法？
angularjs、angular-directive
我正在创建一个指令，它基本上用作<input>，但具有一些特殊功能： return {elem.find('input').css('width', scope.width);
if(angular.isDefined，它可能包含许多指令或HTML5属性，如placeho
浏览 0提问于2015-02-18得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
