标签: angular-directive

我正在尝试创建一个指令，该指令innerHTML通过添加指向以@符号开头的子字符串的链接来修改元素。

这是我迄今为止尝试过的，

linkify.directive.ts

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
      let elementText = this.elementRef.nativeElement.innerHTML;
      // elementText = '@user mentioned you';
      console.log(`Element Text: ${elementText}`);
      this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', this.stylize(elementText));
  }

我是这样用的

<p linkify> Hey @user check this out! </p>

在调试时，我做了以下观察，

• this.elementRef.nativeElement.innerHTML 总是有一个空字符串。
• this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', 'something');被追加 something到元素的文字而不是替换的开始。

问题 1：如何访问innerHTML元素的 ？

问题 2：如何从指令设置元素的 innerHTML？

Stackblitz 演示了这个问题

我尝试了 的文档Renderer2，但对我没有帮助。

我正在尝试为我的应用程序创建一个自定义 Spinner 组件，所以我创建了

spinner.component.ts

export class SpinnerComponent implements AfterViewInit {

    @ViewChild("spinner") spinner: ElementRef;

    constructor() { }

    ngAfterViewInit(): void {
        this.spinner.nativeElement.style.display = "none";
    }

    public show = (): void => { this.spinner.nativeElement.style.display = "block"; };

    public hide = (): void => { this.spinner.nativeElement.style.display = "none"; };

}

spinner.component.ts

<img #spinner src="assets/images/dotSpinner.gif" class="loading"/>

我试图在我的其他组件中控制这个微调器，比如

样本.component.ts

import { SpinnerComponent } from "../spinner/spinner.component";

export class SimpleComponent {

    private spinner: SpinnerComponent = new SpinnerComponent();

    constructor() {}

    actionHandler = (data: any): void => {
        this.spinner.show();
        this.clientActionService.subscribe( …

我在一个巨大的项目中使用ngx-translate 11.x和 angular 7。

使用pipe转换时显示第一个空字符串，使用directive时显示转换字符串的第一个路径。

指导方式：<span [translate]="HELLO'"></span>

管道方式：<span >{{'HELLO'| translate}}</span>

现在，哪个性能更好？

假设我有两个指令：

@Directive({
  selector: '[appDirective1]'
})
export class Directive1Directive {

  public alone = true;

  constructor(private element: ElementRef<HTMLInputElement>) { }

  ngOnInit() {
    if (this.alone) {
      this.element.nativeElement.innerHTML = "I am alone";
    } else {
      this.element.nativeElement.innerHTML = "I have a friend";
    }
  }
}

@Directive({
  selector: '[appDirective2]'
})
export class Directive2Directive {

  constructor() { }

}

Directive1如果Directive2存在于同一元素上，我想更改其行为。例如，这些应该有不同的行为。

<div appDirective1></div>
<div appDirective1 appDirective2></div>

我是否可以在不添加服务以促进通信的情况下执行此操作*？

StackBlitz 示例：https ://stackblitz.com/edit/angular-bgqd15

*我想避免为此创建新服务，因为这感觉有点矫枉过正。

我想延迟ngOndestroy钩子调用，因为我面临一个问题，即我创建了角度应用程序，因为我使用了动画。

示例 - https://stackblitz.com/edit/angular-iribr7-zorjpc?file=app.component.html

当我按下toggl按钮时，我的组件会显示动画。当我第二次按下该按钮时，我的组件在动画之前被破坏。

在我的组件ngOndestroyhooka 中，我在下面使用了：

    ComponentBase.prototype.ngOnDestroy = function () {
        /* istanbul ignore else  */
        if (typeof window !== 'undefined' && this.element.classList.contains('e-control')) { 
        /* used to delete DOM element to avoid memory leak */
            this.destroy(); 
        /* used to delete template refrences to avoid memory leak */
            this.clearTemplate(null);  ------> used 
        }
    };

我也尝试过settimeout方法，虽然setTimout在调试时使用它可以正常工作，但又没有出现同样的问题

我期待任何其他解决方法或建议来解决这个问题.....

我试过如下，但我没有运气----------

https://stackblitz.com/edit/angular-iribr7-bxvnwg?file=app.component.html

我正在尝试修复在我的页面上搜索时遇到的错误。我有一个组件可以在我的所有设置中进行搜索，如下所示：

一切正常，搜索正在返回它应该返回的值，但是当我删除搜索条件时，我注意到条件的第一个字母仍然显示并且不会消失，即使搜索设置字段为空，像这样：

经过两个小时的代码检查，我可以看到代码中的问题所在，但我不知道如何修复它。

这是我的组件的 html：

<mat-form-field appearance="standard">
      <input matInput
             pageSearch
             placeholder="{{'searchSettings'|translate}}">
    </mat-form-field>

如您所见，我正在使用一个名为的指令pageSearch，该指令定义如下，并包含一个valueChange每次释放键盘键时执行的方法：

ngAfterViewInit() {
    const subscription = this.router.events
      .pipe(filter(e => e instanceof NavigationStart))
      .subscribe(event => {
          if (event) {
            this.pageSearchService.term.next('');
          }
        }
      );
    this.subscriptionsManager.add(subscription);
  }

@HostListener('keyup')
  valueChange() {
    this.pageSearchService.term.next(
      this.elementRef.nativeElement.value
    );
  }

该指令使用pageSearchService, 定义如下：

@Injectable()
export class PageSearchService {
  /**
   * Current search term.
   */
  term: BehaviorSubject<string>;
  /**
   * Event to emit when visibility should change in the searchable.
   */
  searchableMatch: EventEmitter<any> = …

我已经input在我的 angular 应用程序 use 中创建了一个简单的自定义组件ControlValueAccessor。所以，当我想创建一个表单input元素时，我不必调用<input />，只需调用<my-input>.

我有一个问题，当我使用 时<input />，我可以使用myDirective. 例如：

<input type="text" class="form-control" formControlName="name" myDirective />

但是，当我使用 时my-input，我不能使用myDirective. 例如：

<my-input formControlName="name" myDirective></my-input>

myDirective在我的输入中不起作用

这是my-input组件使用ControlValueAccessor代码：

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'my-input',
  templateUrl: './my-input.component.html',
  styleUrls: ['./my-input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(()  => MyInputComponent ),
      multi: true …