Angular 7向动态生成的html添加指令
Angular 7是一种流行的前端开发框架，它可以帮助开发人员构建动态且高效的Web应用程序。在Angular 7中，可以通过使用指令来向动态生成的HTML添加功能。
指令是Angular中的一种特殊元素，用于扩展HTML的功能。它们可以用于添加交互性、修改DOM结构、控制元素的可见性等。在向动态生成的HTML添加指令时，可以通过以下步骤进行操作：
- 创建指令：首先，需要创建一个自定义指令。可以使用Angular的CLI命令
ng generate directive directive-name来生成一个新的指令文件。指令文件通常包含指令的逻辑和行为。 - 导入指令：在需要使用指令的组件中，需要将指令导入到组件的模块中。可以使用
import语句将指令文件导入到组件的模块文件中。 - 在HTML中使用指令：在动态生成的HTML中，可以使用指令的选择器来应用指令。指令的选择器可以是元素选择器、属性选择器或类选择器。例如，如果指令的选择器是
appCustomDirective，可以在动态生成的HTML中使用<div appCustomDirective></div>来应用指令。 - 配置指令：在指令文件中，可以通过使用
@Directive装饰器来配置指令的行为。可以设置指令的选择器、属性、事件等。还可以使用@HostListener装饰器来监听元素的事件，并在事件发生时执行相应的逻辑。 - 使用指令的方法和属性：在指令文件中，可以定义方法和属性，供动态生成的HTML中的元素使用。可以在指令文件中定义公共方法和属性，并在HTML中使用指令的选择器来调用这些方法和属性。
总结起来，向动态生成的HTML添加指令的步骤包括创建指令、导入指令、在HTML中使用指令、配置指令和使用指令的方法和属性。通过使用指令，可以为动态生成的HTML添加各种功能和行为。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
在AngularJS中这样做的方式： el = angular.element('.cm-string');el.attr('tooltip-append-to-body', 'true');
$compile(el)(scope); 有没有一种动态附加matTooltip或任何指令的方法？
浏览 11提问于2019-03-11得票数 1
在定义自定义指令时，链接函数和编译函数都会将“元素”作为参数，该参数可以方便地向其添加类。但是，如果该指令是“element”指令，并且“替换”字段设置为false (因为试图避免使用这个折旧字段)，则编译和链接函数中的元素参数是原始指令的元素(<some-widget>)，而不是模板中的元素(<div>)，因此浏览器将忽略任何添加的类。问：在模板中动态<e
浏览 1提问于2014-12-23得票数 1
回答已采纳
1回答
我在更改div的html时发现了一个问题：$scope.binds="<h1>run</h1>";
我在java脚本中设置属性ng-bind-html，因为我已经在代码中集成了一些插件，在这些插件中，div of class="lab&q
浏览 2提问于2016-01-16得票数 0
回答已采纳
感谢您的关注。我的脖子出了问题，我想自己解决这个问题，但我需要有人给我指明正确的方向。我有个指令： 'use strict';
.directive('tool', function() {-template.<e
浏览 3提问于2016-03-09得票数 0
回答已采纳
当我传递json模式时，它是返回小部件html元素对象。
在@NgModule中，我已经包含了BrowserModule和FormsModule
浏览 2提问于2016-10-18得票数 1
回答已采纳
2回答
我知道在ng2中我们有ComponentFactoryResolver，它可以解析我们可以应用于ViewContainerRef的工厂。
但是，指令也有类似的东西吗？实例化它们并将它们应用于来自组件的投影内容的方法？
浏览 1提问于2016-09-19得票数 15
回答已采纳
我很难理解AngularJS中的指令。AngularJS本身的定义充其量也是令人困惑的：
Directives are a way to teach HTML new tricks.During DOM compilation directives are matched against the HTML and executed.有没有人能用简单易懂的英语解释一下AngularJS中的指令，这是编程教学中常用的。类
浏览 0提问于2013-02-02得票数 6
回答已采纳
我有一个带有angular应用程序、angular指令、控制器和其他javascript功能的网页。其中一个功能是在页面上添加html代码。这个html包含了我的angular指令中的一个。但是如果是动态添加的，angular不会呈现指令的模板。在这种情况下，如何呈现这个离经叛道的</
浏览 0提问于2016-04-19得票数 0
1回答
正如在中所看到的，我动态地将一个HTML添加到我的一个元素中，这可以归结为： selector: 'my-comp', }这将导致将<a routerLink="/my-route">GoTo Route</a><
浏览 4提问于2016-09-07得票数 9
回答已采纳
像我所说的那样，使用Angular指令作为"HTML装饰器“实际上已经不可能了吗？我发现在Angular 1.x中，这个模式对于将遗留应用程序迁移到单页应用程序来说是非常有价值的，它首先构建了一组指令，这些指令将向服务器生成的标记添加功能。对于Angular团队来说，消除该功能似乎是一个疏忽。有一个用于更漂亮
浏览 0提问于2017-04-22得票数 2
我试图在组件中动态生成标记，其中要创建的标记涉及其他自定义组件。与…有关的东西：在myComponent.ts中 const el: HTMLElement = this.elementRef.nativeElementb = document.createElement('my-subcomponent'); })
浏览 3提问于2016-10-04得票数 3
回答已采纳
1回答
我正在尝试验证动态生成的输入，但我不知道如何做到这一点。 ng-required="true"
ng-model="conditionItem.situation[$index]"&
浏览 0提问于2019-03-01得票数 1
回答已采纳
2回答
我试图通过jQuery .attr()向特定事件上的HTML元素添加一个指令。添加该指令后，该指令不执行其工作。angular.module("myApp", []) restrict: "A",link: function () {
alert(&q
浏览 2提问于2017-05-29得票数 0
回答已采纳
加载超文本标记语言后，我可以使用ElementRef.nativeElement.querySelector()选择任何超文本标记语言元素，那么如何在所选元素上应用指令？
浏览 0提问于2018-03-23得票数 1
1回答
我想通过使用host属性将一个指令添加到另一个指令中的元素，但似乎没有一种方法可以引用另一个指令。export class DirectiveOne { }
selector: '[two]'export class DirectiveTwo { }
在这样做的时候，我得到了标准的“无法绑定到'two‘，因为它不是一个已知的本机属性”的错误。从一个指令<
浏览 17提问于2016-05-11得票数 18
回答已采纳
我正在使用angular2(v2.2.4)来构建我的web应用程序。在这个应用程序中，我需要动态加载组件。我已经阅读了堆栈溢出中几乎所有相关的答案，并发现了一个令人沮丧的事实:我们需要在容器中编写一个目标元素来像下面这样加载我们的组件：然后在容器组件ts代码中使用它，如下所示：
@ViewChild('target', {read: ViewContainerRef}) vcRef: View
浏览 3提问于2016-12-19得票数 2
回答已采纳
这里是 selector: "hello", [style.transform.scale.y]="scaleY" Scaled by Angular</div>
<p
浏览 1提问于2019-11-26得票数 2
回答已采纳
我正在尝试在一个项目中使用优秀的angular2库。有人一个非常简单的属性指令，我正在尝试使用。我试图修改指令，以便传递动态占位符。200x200/auto"><img holderjs data-src="{{myvariable}}">
<img holderjs [data-src]="myvariable"
浏览 2提问于2017-10-10得票数 1
回答已采纳
我有web应用程序，在这个web应用程序中，我有很多生成的输入组件。生成的组件依赖于用户输入参数，并动态添加到网页中。
其中一个参数是location picker。这不是必需的参数，因此它的生成也取决于用户输入。对于位置选择器，我使用 angular指令。我的问题是，当用户添加输入时，我添加了包含ng-app定义的生成
浏览 1提问于2014-09-16得票数 0
想要表达我想问的问题有点困难，所以请耐心等待。
我知道，在Angular.js中，指令是动态标记背后的某种魔力。曾经严格通过jQuery来完成的事情，现在可以通过指令来完成。据我所知，Angular的HTML编译器遍历DOM以搜索与编程指令相对应的属性和/或元素，并将这些元素链接到它们各自的指令。我想知道的是，是否有一
浏览 1提问于2014-07-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
