代码之家 › 专栏 › 技术社区 › Jobayer Ahmmed

返回angular 6中自定义管道的带有click事件的锚定标记

typescript angular javascript

Jobayer Ahmmed · 技术社区 · 5 年前

如何动态创建锚定标记、添加绑定方法的click事件并返回并在td中显示它?

@Pipe({
  name: 'mypipe'
})
export class MyPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return this.stylize(value);
  }

  stylize(msg: string) {
      let anchor = document.createElement('a');
      anchor.addEventListener('click', (event: Event) => {
        this.printMessage(msg);
      });

      let text = document.createTextNode('Click to print message in console');
      anchor.appendChild(text);

      console.log(anchor);
      return anchor;
  }

  printMessage(msg: string) {
    console.log(msg);
  }
}

 <td>{{ msg | mypipe }}</td>

我想获得一个以msg作为文本的锚定标记,然后单击带有printMessage()方法的事件。控制台.log打印没有click事件的锚定标记,这意味着click事件没有绑定到锚定标记,并且返回的值没有显示在表td中。

0 回复 | 直到 5 年前

Andrei 5 年前

实际上,您可以通过以下方式通过管道插入元素 <td [innerHtml]="msg | mypipe"></td> 并返回要插入的元素的html源代码。但它只是html元素,无法访问您的环境。解决问题的更合适的方法是制作一个简单的组件

@Component({
 selector: 'my-tag',
 template: `<a (click)="handle()">{{msg}} Click to print message in a console</a>`
}) 
class MyTagComponent {
  @Input() public msg;
  public handle() {
   console.log(this.msg)
  }
}

使用