我正在尝试制定一个简单的指令。加载图像时，img src 将设置为@Input()字符串字段。加载时，图像将设置为原始 src 值（或至少我尝试实现它的方式）。
我在这里使用了答案：https : //stackoverflow.com/a/38837619/843443 但它不是指令，因此在我使用图像的任何地方都需要进行一些更改。
我的第一次尝试：
加载 img.directive.ts：
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[tohLoadingImg]'
})
export class LoadingImgDirective {
imgSrc: String;
@Input()
spinnerSrc: String;
constructor(private el: ElementRef) {
this.imgSrc = el.nativeElement.src;
el.nativeElement.src = this.spinnerSrc;
}
@HostListener('load') onLoad() {
this.el.nativeElement.src = this.imgSrc;
}
}
从：
<img src="{{hero.imgUrl}}" alt="Random first slide">
到：
<img src="{{hero.imgUrl}}" alt="Random first slide" [tohLoadingImg]="'/assets/ring.svg'">
错误：
Can't bind to 'tohLoadingImg' since it isn't a known property …我正在尝试构建一个 Angular 指令，我想根据一些配置输入值实现以下目标
disabled元素根据我对 Angular 的一点了解和理解，我们可以使用Structural Directive来实现第一个要求。至于第二和第三个要求，我们需要创建Attribute Directive。这是我对这两个指令的实现
import { SomeService } from './some.service';
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[structuralBehaviour]' })
export class StructuralBehaviourDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef, private someService: SomeService) { }
@Input() set structuralBehaviour(config: any) {
// 1st Condition
// Conditional Stamentents using config and somService
// For the purpose to decide whether to add template in …我有以下指令：
@Directive({
selector: '[changeColor]',
exportAs:'changeColor'
})
export class ColorDirective {
constructor(elem: ElementRef, renderer: Renderer2) {
renderer.setStyle(elem.nativeElement, 'color', 'red');
}
}
我有以下模板：
<h1 changeColor>Hello</h1>
这按预期工作并以红色显示“Hello”。但是，当我尝试访问指令的引用时，出现错误。例如，下面的代码：
<h1 #x=changeColor>Hello</h1>
{{x}}
产生以下错误"There is no directive with "exportAs" set to "changeColor""。我哪里错了？
我有一个mat-icon和一个mat-badge包含一个数字。
我正在寻找mat-badge仅当数字为<=0.
我做*ngIf了整个mat-icon，结果很明显，它删除了mat-icon和mat-badge。
这是代码
<mat-icon matBadge="{{matBadge}}" class="icon">shopping_cart</mat-icon>
我想创建一个适用于溢出时的指令。我过去曾经使用过dotdotdot jQuery插件，但是在angular 5中它并没有真正起作用。
到目前为止，我正在使用选择器[appDotdotdot]创建一个名为DotdotdotDirective的指令，如下所示：
import { Directive, ElementRef } from '@angular/core';
declare var $: any;
@Directive({
selector: '[appDotdotdot]'
})
export class DotdotdotDirective {
constructor(private el: ElementRef) { }
}
用法很简单：
<h3><a href="#" appDotdotdot>{{data.trip.name}}</a></h3>
我还导入了jQuery插件，以防可以在指令中使用。index.html：
<script src="assets/js/jquery.dotdotdot.js"></script>
我期望代码应该在构造函数中实现，但是我不知道如何在angular 5中使用它？我应该将指令用作jQuery插件的包装器，还是angular对此要求有不同的解决方案？提前致谢！
所以我想知道是否有办法传递 ng-template 并生成它的所有内容以包含插值中使用的变量？
另外，我还是 angular 的新手，所以除了删除 html 元素之外，我还需要担心删除其他任何内容吗？
最后会有一个指向 stackblitz.com 存储库的链接，其中包含下面显示的所有代码。
以下是实现我的指令的 src/app/app.component.html 代码：
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<!-- popup/popup.directive.ts contains the code i used in button tag -->
<button PopupDir="" body="this is a hardcoded message that is passed to popup box"> simple
</button>
<ng-template #Complicated="">
<div style="background-color: red;">
a little more complicated but simple and still doable
</div>
</ng-template>
<button PopupDir="" [body]="Complicated">
complicated
</button>
<ng-template #EvenMoreComplicated="">
<!-- name and …我试图首先修复 cli 为我编写的基本单元测试。我是单元测试的新手，所以这是代码
import { MyDirective } from './my.directive';
describe('MyDirective', () => {
it('should create an instance', () => {
const directive = new MyDirective(); // it throws error here
expect(directive).toBeTruthy();
});
});
我需要在 MyDirective 中注入 ElementRef
unit-testing dependency-injection karma-jasmine angular-directive angular
我创建了一个带有库的新 Angular 7 项目。该库包含一个指令、一个服务和一个模块（指令 get 是注入的服务，而服务是在模块中导出的 injectionToken）。我在编译时收到此警告：
检测到循环依赖项中的警告：projects\auth\src\lib\auth.module.ts -> projects\auth\src\lib\login-form-ref.directive.ts -> projects\auth\src\lib\auth。 service.ts -> projects\auth\src\lib\auth.module.ts
检测到循环依赖项中的警告：projects\auth\src\lib\auth.service.ts -> projects\auth\src\lib\auth.module.ts -> projects\auth\src\lib\login-form-ref。指令.ts -> 项目\auth\src\lib\auth.service.ts
检测到循环依赖项中的警告：projects\auth\src\lib\login-form-ref.directive.ts -> projects\auth\src\lib\auth.service.ts -> projects\auth\src\lib\auth。 module.ts -> projects\auth\src\lib\login-form-ref.directive.ts
auth.service.ts
import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Token } from './models/token';
import { OAuthClient } from './models/oAuthClient';
import { OAUTH_CONFIGURATION } from './auth.module';
@Injectable({
providedIn: 'root' …dependency-injection circular-dependency angular-directive angular
我一直在阅读文档，但似乎仍然对何时应该使用指令或组件感到困惑......
另外，什么时候最好抽象组件并将它们放入模块中？
我正在尝试根据服务调用结果动态验证自定义文本输入。如果它是真的意味着 jumpyId 可以使用，否则显示错误。我现在的问题是当我从 fromEvent 更新 this.isAvailable 时，它没有反映自定义指令中的值。我期待如果 api 调用返回true，则指令应该接收true否则false。
可用指令.ts
import { Directive, forwardRef, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: 'custom-text-input[vendorAvailable][formControlName],custom-text-input[vendorAvailable][formControl],custom-text-input[vendorAvailable][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: AvailabilityDirective, multi: true }
]
})
export class AvailabilityDirective implements Validator {
@Input('available') available: boolean;
validate(c: AbstractControl): { [key: string]: any } {
console.log("valid", this.available);
if (!this.available) {
return {
available: false
};
}
return null;
}
}
事件观察： …