同一自定义指令Angular2多次出现
是指在Angular2应用中，同一个自定义指令在模板中多次使用的情况。
自定义指令是Angular2中的一种重要特性，它允许开发者创建自己的指令，以便在模板中重复使用。自定义指令可以用来扩展HTML元素的行为或修改其外观。
在同一个模板中多次使用同一个自定义指令有以下几个方面的优势：
- 代码复用：通过多次使用同一个自定义指令，可以减少重复编写相似代码的工作量，提高开发效率。
- 统一管理：通过自定义指令，可以将一些常用的功能或样式封装起来，方便统一管理和维护。
- 灵活性：自定义指令可以根据不同的使用场景进行参数配置，从而实现不同的功能和效果。
- 可读性：通过多次使用同一个自定义指令，可以使模板代码更加简洁、易读，提高代码的可维护性。
在Angular2中，可以通过以下步骤来实现同一自定义指令多次出现的效果：
- 创建自定义指令：使用Angular2提供的@Directive装饰器来创建自定义指令，并定义其行为和样式。
- 在模块中声明指令：在使用自定义指令的模块中，将该指令声明为模块的providers或declarations中的一部分。
- 在模板中使用指令：在模板中使用自定义指令的选择器来标记需要应用该指令的元素。
例如，假设我们创建了一个名为HighlightDirective的自定义指令，用于将元素的背景色设置为黄色。我们可以在模板中多次使用该指令，如下所示：
<div appHighlight>这是第一个元素</div>
<div appHighlight>这是第二个元素</div>在上述示例中，我们使用了同一个自定义指令appHighlight两次，分别应用于两个不同的div元素。这样，这两个div元素的背景色都会被设置为黄色。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（CVM）是腾讯云提供的弹性计算服务，为用户提供可扩展的云端计算能力。CVM支持多种操作系统和应用场景，可以满足不同规模和需求的用户。
产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我在这个问题上做了一些研究和开发，Angular1也出现了同样的问题，大多数人建议使用ng-attr-placeholder，但在Angular2中没有解决这个问题的方法。
我问的是Angular2而不是Angular1。
浏览 4提问于2017-07-04得票数 4
回答已采纳
我想在我的angular2应用程序中使用第三方ui元素/组件，比如。要使用这个库，我必须直接访问DOM，这并不是在angular2中应该使用的方式(例如，由于一些原因，例如服务器端呈现)：
var target = document.getElementById('foo')
var spinner = new Spinner(opts).spin(target);
对于如何在angular2中处理这样的第三方库，有什么建议吗？或者，直接DOM操作是目前唯一的方法吗？
浏览 2提问于2016-05-02得票数 3
回答已采纳
我正在使用TypeScript为Range2.0做一个小项目。现在，据我所知，角2.0没有内置的"min“和"max”标记的验证器。我理解如何构建自定义验证器并使用FormBuilder附加它，但我希望了解如何创建自定义验证器指令，我可以附加在属性上。HTML如下所示：
<div class="unit">
<div class="label">Age (13 - 120):</div>
<div class="labelTarget">
<input id="
浏览 4提问于2015-12-04得票数 3
回答已采纳
3回答
更新到Angular2 rc2和Angular2 rc3后，出现错误
“类型‘路由器’上不存在属性'urlTree‘”
我的函数
isRouteActive(routePath) {
return this.router.urlTree.contains(this.router.createUrlTree(routePath));
}
如何在angular2 rc3中获取活动链接？
浏览 1提问于2016-06-22得票数 3
我试图弄清楚如何侦听angular2中特定元素上的特定事件。
HTML
<div id="hello-world">
Just a random message
</div>
在javascript中，我将其实现为：
document.getElementById("hello-world").addEventListener("mousewheel", (e) => {
console.info(e);
});
不知道在Angular2中实现这一点的正确方法是什么，希望有人能给出答案。
浏览 3提问于2017-04-19得票数 0
我有下面的指令，很好用。
angular.module('myApp').directive('jqdatatable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs, ngModelCtrl) {
var options = {};
if (scope.dtOptions) {
options = scope.dtOp
浏览 1提问于2016-09-28得票数 0
回答已采纳
我需要为自定义输入验证实现一个指令。
该指令预计将在页面上多次使用，但提供一个包含当前所有问题摘要的单一可视元素，即可视化单例。
实现这样一个指令的最佳方法是什么?对于所有实例来说，将细节转化为可视化的方法是什么？
浏览 2提问于2015-05-13得票数 0
回答已采纳
http绑定在Angular2中的实际用途是什么？有没有可用的代码或柱塞？在文档中，它没有被记录，并且说使用HTTP提供程序。
浏览 0提问于2016-07-31得票数 0
1回答
我试图在学习角2的同时设置一个简单的路由，每当我点击一个链接，浏览器就会被路由到新的路径，但是浏览器正在重新请求所有的资源(而不是单页应用程序)。
我的索引文件，
<!--... . . various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"
浏览 0提问于2016-03-02得票数 4
回答已采纳
我对棱角和打字很陌生，所以这可能是很基本的。
我试图在模板中使用图表(使用angular2 )来生成一个Chart.js组件。
我意识到正在开发一个，它专门使用Chart.JS，但我想了解如何做到这一点，因为它无疑会出现在指令不可用的情况下。
到目前为止，我已经尝试在模板中做这个简单的事情：
<canvas id="chart"></canvas>
<script>
$(function () {
//instantiate chart on $("#chart")
});
</script>
但是当模板被ang
浏览 4提问于2016-01-07得票数 11
回答已采纳
1回答
我想在我的视图中动态加载组件，这是我尝试过的
在我的html文件中
<p>
<dynamic-component [componentData]="componentData"></dynamic-component>
</p>
然后在我的ts文件中
export class ChatCmpComponent implements OnInit {
private componentData = null;
ngOnInit() {
this.componentData = {
component: Chat
浏览 0提问于2017-07-29得票数 0
我正在寻求一些建议，在使用Angular2时应该如何处理元素。我已经在本地存储中存储了一些元素id，并希望在某些特定元素上设置一个选定的类名。
现在我用的方法是：
ngAfterViewChecked() {
// Check if seats has been selected before
var selectedSeats: elementInterface = JSON.parse(localStorage.getItem('SelectedSeats'));
if (selectedSeats != null) {
var outboundElement =
浏览 3提问于2017-01-26得票数 0
回答已采纳
1回答
我正在工作的angular2应用程序，是与wordpress网站一起放置的。以下是目录结构：
/var/www/html
app/ (angular2 app is placed under this folder)
wp-includes/
wp-content/
...
htaccess文件放在html文件夹下进行wordpress url重写，另一个htaccess放在angular2 url的app文件夹下。我已经更新了wordpress的htaccess文件，以忽略app文件夹下的urls，但是现在wordpress的urls无法工作，apache 404即将到来。以下是wo
浏览 3提问于2017-05-18得票数 3
回答已采纳
我正在学习angular2，基本上我要做的是创建一个组件，这个组件(一些方法)可以包含其他组件。
我的意思是，我想要创建一个组件Card，可以在其中包含内容。
这就是一个例子：
<Card>
<span>Some Content</span>
</Card>
我想多次重复使用卡片，我怎么能创建这样的组件呢？
浏览 1提问于2016-05-25得票数 4
回答已采纳
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
我已经编写了指令和组件，我需要将值从组件传递到指令，并相应地隐藏元素。简单地说，我正在尝试创建一个指令，类似于Angular1在Angular2中的ng显示和ng隐藏。
headermenu.component.ts
import {Component} from 'angular2/core';
import {DataService} from './data-service.service';
import {ShowHeaderDirective} from './show-header.directive';
@Component({
浏览 1提问于2016-04-30得票数 0
2回答
我正在构建一个Angular2客户端应用程序。我目前正在开发成员组件，并将客户端组件与MVC6 vNext Identity v3集成。我已经编写了自定义Angular2密码验证器，如下所示：
needsCapitalLetter(ctrl: Control): {[s: string]: boolean} {
if(!ctrl.value.match(/[A-Z]/))
return {'needsCapitalLetter': true}
return null;
}
needsLowerLetter(ctrl: Control): {[
浏览 22提问于2016-02-15得票数 20
回答已采纳
1回答
一个人怎么能做到这一点？
我提供了一个Fiddle来演示我的问题：
myApp.directive('tabs', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<ul ng-transclude></ul>'
}
});
myApp.directive('tab', function() {
retur
浏览 1提问于2013-12-19得票数 2
回答已采纳
我知道我可以分配本地模板变量来保存元素引用，如下所示
<input #myInput />
但是，我可以使用自定义值来声明变量吗？
例如：
<!-- Somewhere I do #obj = model.data.something -->
<input [(ngModel)]="obj.inputA" >
<input [(ngModel)]="obj.inputB" >
而不是做
<input [(ngModel)]="model.data.something.inputA" >
浏览 0提问于2016-06-09得票数 0
回答已采纳
1回答
我做了一个自定义的attr directive，我将在兄弟元素中使用它，比如：
<div>
<div [customAttrDirective]="'value'">1</div>
<div [customAttrDirective]="'value'">2</div>
<div [customAttrDirective]="'value'">3</div>
<div [customAt
浏览 3提问于2017-07-21得票数 0
回答已采纳
我想为我的应用程序编写一个Inno安装安装程序，它可以多次安装，并在“”中以不同的名称显示多次(基于用户输入)。据我所知，在Inno安装程序中，AppVerName设置常量定义了这个值，因此我定义了AppVerName如下：
AppVerName={#MyAppName}_{code:GetNetworkId} {#MyAppVersion}
我从用户那里获得来自自定义向导页面的NetworkId，但是在我知道NetworkId (在向导初始化之前？？)之前，似乎只对AppVerName进行了一次计算，所以我的所有安装都将以相同的名称安装："AppName_ AppVersion“。
浏览 4提问于2013-10-22得票数 2
回答已采纳
在更新到RC6之后，根据如下所示的变量，选择禁用后会出现问题：
我已经看过这条警告消息，在创建控件时，禁用选项设置为true，但它不符合我的需要，因为它不能是动态的(我必须调用.disable() / .enable())
如果plnkr不工作，下面是一些代码：
@Component({
selector: 'my-app',
template: `
<form [formGroup]="form">
//this select is disabled
<select formControlName=&#
浏览 5提问于2016-09-07得票数 1
回答已采纳
2回答
Angular2窗体验证错误消息
、、、、
总的来说，我对trying和JavaScript还不熟悉，我试图在用户输入错误时使用物化库(数据-错误属性)添加消息。所以我的html组件如下所示：
<input
type="text"
id="username"
formControlName="username"
[class.valid]="username?.valid &&
浏览 3提问于2016-12-28得票数 0
1回答
我有一个指令和一个页面(我实际代码的简化版本)。当通过事件调用myMethod时，我需要myPages isTrue方法才能变为真，但我不确定如何从指令中访问页面的变量。我该怎么做呢？PS。我使用的是一个叫做Ionic2的基于Angular2的框架。
@Directive({
selector: '[mySelector]'
})
export class myDirective {
constructor() {
}
myMethod() {
//Make myPage's isTrue equal to true
浏览 0提问于2016-04-04得票数 0
在使用选择器'some-comp'声明组件之后，在页面中使用<some-comp></some-comp>只能工作一次。我想多次使用它--任何帮助，下面是一个示例代码：
@Component({ selector: 'some-comp' })
@View({ template: 'component template' })
class SomeComponent { }
bootstrap(SomeComponent);
浏览 2提问于2015-06-12得票数 8
回答已采纳
我有一个自定义指令，如下
@Component({
selector: 'my-textfield' ,
template: `
<div>
<label floating>{{label}}</label>
<input type="text"></input>
</div>
`,
})
export class TextFieldInput{
@Input label:string;
}
如何才能实现以下目标，从而将[(ngMo
浏览 0提问于2016-08-27得票数 0
尝试在模板标记中使用ngFor和ngIf有一个奇怪的问题。我试图在分析对象中显示标签标题，如下所示：
分析对象：
class Analyst {
private _properties = {labels: [{title:'a'}]};
get labels() {
return this._properties.labels;
}
set labels(labels:Array<string>) {
this._properties.labels = labels;
}
}
组件模板：
<div *n
浏览 9提问于2017-01-10得票数 3
回答已采纳
3回答
我想显示一个dataList。有些值是从函数中计算出来的。angular2似乎多次调用calculate函数。
<tr *ngFor="let data of dataList">
<td>{{ data.no }}</td>
<td>{{ data.name }}</td>
<td>{{ calculateFunction(data.price) }}</td>
</tr>
控制台将输出"calculate...“很多次，比dataList.
浏览 0提问于2017-07-20得票数 14
回答已采纳
1回答
我刚刚将我的ng2应用程序从rc.4升级到rc.5。我的app.html中的内容是：
<div>
<switch-app [account]="cache.accountInfo" [app]="cache.current_app">
<router-outlet></router-outlet>
</div>
我在app.module.ts上声明这个SwitchAppComponent：
@NgModule({
imports: [
]
declarations
浏览 0提问于2016-08-23得票数 3
我已经从Angular2 beta升级到了RC1
attr.style没有正常工作，没有错误，但是这种样式不会出现。
<div class="hotspot_info pointer" attr.style="top: {{towerPoint.posY}}%; left: {{towerPoint.posX}}%;" >
浏览 2提问于2016-06-03得票数 1
回答已采纳
这就是我如何将主机绑定到NG2-RC4中父组件上名为“禁用”的按钮属性上：
@Component({
selector: "nav-next",
template: `
<div class="nav-next-directive" (click)="onClick($event)">
<button color="primary" class="primary" [attr.disabled]="disabled">
浏览 3提问于2016-10-15得票数 2
我希望在$rootScope中使用$root值，在angular2中使用$root值。此外，我还混淆了如何在angular2中转换angularjs指令，如下所示。
.directive('thisDirective', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function(evt){
var
浏览 4提问于2015-12-22得票数 2
1回答
角度6-防止点击功能改变
、、、
我有一个返回随机数的function：
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Component {
randomPerc(min, max): number {
return Math.floor(Math.random() * (max - min + 1)
浏览 1提问于2018-10-19得票数 1
回答已采纳
我想用html文件替换我的代码模板。我该怎么做呢？
Greeting.annotations = [
new angular.ComponentAnnotation({
selector: 'greeting'
}),
new angular.ViewAnnotation({
template: '<h1>Hello!</h1>'
})
];
我想要这样的东西
template: 'path/to/my/template.html'
我使用Angular2和E
浏览 8提问于2015-11-23得票数 2
回答已采纳
1回答
上下文：
我正在将BI遥测/日志库实现为Angular2服务。目标是每次我在应用程序中访问一个新的“页面”时，都要启动一个PageView事件。
为此，我目前正在对路由器的事件进行订阅(基本上是执行中推荐的操作)。我的页面浏览量现在在导航上是正确的。
当前问题：
我的页面视图的部分有效负载是显示该页面中包含的内容。因此，我的服务需要有某种方法来“检查”应用程序中的任意组件。
基于我对Angular2的有限理解，我们根本不清楚什么是合理的方法。
我想知道“检查服务中的任意应用程序组件”是否已经解决了其他一些问题。
浏览 0提问于2017-04-20得票数 1
回答已采纳
我正在尝试捕捉@HostListener的焦点事件。但它对我来说不是很好。
我在下面看到了一篇文章。
还看到文章上出现了一个柱塞。
它对我起作用了。无论我如何改变它，如下所示，它将不会工作。
@Component({
selector: 'my-app',
template: `<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">`
})
export cl
浏览 1提问于2017-02-04得票数 10
回答已采纳
1回答
我不明白为什么不能让路由器作为依赖项导入。在控制台中，我得到了错误：
system.js:4 GET http://127.0.0.1:8000/angular2/src/platform/dom/dom_adapter.js 404 (Not Found)
看看谷歌的例子，他们使用的是几乎相同的设置，所以我不太确定我哪里出了问题。如果我注释掉路由器的导入，所有这些都会像预期的那样工作。
index.html：
<body>
<main>Loading...</main>
<script src="lib/traceur-ru
浏览 3提问于2016-01-21得票数 0
回答已采纳
ReactJ有虚拟DOM来呈现更改。Angular2不包含虚拟DOM。Angular2和ReactJS一样是反应性的。对于angular2中的任何更改，整个组件不会被更改，但是组件的部分将被更改。Angular2用什么来显示组件部分的变化呢？编辑：，让我更具体一些。我知道检测变化是方法。但是变化检测发生在模型上。一旦更改检测、单向循环运行，就必须对真正的DOM进行操作。这是一个特定的点，角度使用虚拟DOM概念，如果不是，则使用什么替代操作实际DOM。
浏览 9提问于2016-10-18得票数 0
我需要使用Typescript将jquery插件应用到Angular2中的单选按钮。
如果我在ngAfterViewChecked中赋值，它会被调用多次，控件也会被多次刷新。
在DOM就绪后调用javascript方法的替代解决方案是什么？
浏览 7提问于2016-12-30得票数 15
3回答
将我的项目更新到RC6后，出现以下错误：
Error: Typescript found the following errors:
app.component.ts (12, 3): Argument of type '{ moduleId: string; selector: string; templateUrl: string; styleUrls: string[]; directives: (type...' is not assignable to parameter of type 'ComponentMetadataType'.
Obj
浏览 3提问于2016-09-02得票数 8
回答已采纳
我有一个场景，需要加载一个使用angular2路由构建的菜单。在特定组件中，我需要加载另一个菜单/选项卡，这只不过是另一个angular2路由组件。请找到我的需求的快照
请找到主菜单的代码
import {Component, bind} from 'angular2/core';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams, ROUTER_BINDINGS} from 'angular2/router'
浏览 2提问于2016-06-15得票数 0
回答已采纳
1回答
我正在尝试在64位Windows 7上配置Nginx和PHP，这样PHP和Nginx都应该始终使用我在启动时或在配置文件中指定的路径。 现在对于Nginx，我使用以下VBScript启动它的服务器可执行文件，用于加载自定义配置文件： ... Vbs code ...
sh.run "cmd /K CD "& NginxPath &" & start nginx", 0
sh.run "cmd /K CD "& NginxPath &" & start nginx -c "&
浏览 25提问于2019-01-21得票数 0
问题:使用亚马逊网络服务的Amplify.js。一个类似Tinder的应用程序。在这里你可以在附近找到工作。这些可能只会出现一次。我们应该保存用户喜欢和不喜欢的内容。
我已经做到了：
我有个计划：
type Query {
nearbyJobs(location: LocationInput!, km: Int): ModelJobConnection
}
type User @model {
id: ID!
name: String
interacts: [Jobinteract] @connection(name: "interactsuser")
浏览 40提问于2019-06-03得票数 0
Angular2: 2.0.0-beta8 8
我想定制一个指令。为了实现这一点，我创建了一个包含所有自定义参数的对象，并希望将其传递到模板上，如下所示：
我在模板中使用的指令：
<div my-directive="{param1: 46, param2: 48}"></div>
在我的指令中输入：
@Input('my-directive')
public conf: Configuration;
Param对象定义：
export interface Configuration{param1;param2; ...}
遗憾的是
浏览 2提问于2016-03-13得票数 4
回答已采纳
每当我必须在页面中动态地包含一个篡改板时，我就一直在使用ng-include in角1。
现在，如何在角2中实现这一点。我已经尝试搜索并找到了以下这些：
，
有人能解释一下如何在angular2中这样做吗?因为链接上写着ng-include是不包括的，因为有一些安全原因。
或者至少如何在templateUrl属性中使用可验证的值，以便可以在服务器端处理可验证的值以服务于模板.
浏览 8提问于2015-11-17得票数 16
回答已采纳
1回答
我在控制台中搜索我的ts文件，但它没有出现。
我已经尝试了很多次来调试我的angular 2项目，但是没有。现在不调试就不能继续了，有没有人可以帮我？
浏览 0提问于2016-08-24得票数 0
在我的应用程序中，我们有很多带有很多表单域的组件。因此，每当用户更改表单中的某些内容时，如果用户想要导航到另一个组件，在没有保存更改的情况下，就会收到使用canDeactivate的警告消息。但是，如果用户关闭选项卡，则不会再收到警告消息，而不是导航到应用程序。我已经在组件中使用window:beforeunload解决了这个问题，如下所示：
@HostListener('window:beforeunload', ['$event'])
public oncloseTab( event: KeyboardEvent) {
if (this.shou
浏览 30提问于2021-05-17得票数 0
回答已采纳
在角2中，如果我看到<element [x]='' ..>，我如何知道x是一个导致单向数据绑定(例如ngClass或nyStyle)的指令，或者它是应用于这个标记的角分量的输入(组件配置中的输入)？
浏览 3提问于2016-03-20得票数 3
回答已采纳
2回答
我正在尝试做一个登录表单组件，但是我无法读取表单数据。
当我试图在控制台上写用户名时，“undefined”写。
一切看起来都很平常，但表单数据并没有出现在组件中。
以下是html代码：
<form (ngSubmit)="onSubmit(myForm)"
#myForm="ngForm"
class="form-signin">
<div class="form-group">
<h2 class="form-signin-heading&#
浏览 1提问于2016-11-28得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
