Question

如何动态创建锚标记，添加绑定方法的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（）方法单击事件。 console.log打印的锚标记没有click事件，这意味着click事件未绑定到锚标记，并且返回的值未显示在表td中。

Answer 1

实际上，您可以通过类似<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)
  }
}

用法

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

从角度6的自定义管道返回带有click事件的锚点标签

1 个答案: