Question

我在角项目中为'Read More'功能创建了一个管道。在自定义管道中，Iam无法创建routerLink重定向到页面。我们可以创建一个吗？

Answer 1

我在这里为您撰写了一份简短的代码。我希望这很有用。

链接： https://stackblitz.com/edit/angular-wib3ak

指令

    import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector : '[read-more]'
})
export class ReadMoreDirective implements OnInit {

  @Input('read-more') text : string;

  constructor(
    private elementRef : ElementRef,
    private renderer : Renderer2
  ) {
  }

  ngOnInit() {
    if (this.text && this.text.length > 30) {
      //
      // Add button read more
      let text = this.renderer.createText(this.text.substring(0,30));
      this.renderer.appendChild(this.elementRef.nativeElement, text);


      let link = this.renderer.createElement('a');
      link.href = 'link to long';
      link.innerHTML = 'Read More';

      this.renderer.appendChild(this.elementRef.nativeElement, link);
      return;
    }

    this.elementRef.nativeElement.innerText = this.text;
  }
}

在角管中创建链接

1 个答案: