javascript - 从 Angular 6 中的自定义管道返回带有点击事件的 anchor 标记

Question

如何动态创建 anchor 标记，添加绑定(bind)方法的点击事件并返回并在 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 作为文本的 anchor 标记，并使用 printMessage() 方法单击事件。 console.log打印的 anchor 标记没有点击事件，这意味着点击事件没有绑定(bind)到 anchor 标记，并且返回值没有显示在表td中。

Answer 1

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

@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)
  }
}

使用

<td><my-tag [msg]="msg"></my-tag></td>