代码之家 › 专栏 › 技术社区 › Zabs

将点击事件绑定到动态生成的内容(角度4)

datepicker angular javascript

Zabs · 技术社区 · 6 年前

我有以下函数,基本上生成日期并将其插入视图中的div之前-我需要修改此函数,以便能够使用角度渲染器函数使用单击事件,但在使用以下代码时有困难:

generateTimestampDiv(date, $this) {
    let parent = document.getElementsByClassName('ui-datepicker-header');
    let minutes = (date.getMinutes()<10 ? '0' : '') + date.getMinutes();
    let datetime = date.toDateString()+' '+date.getHours()+':'+minutes;

    let content = '<div style="background-color: #fafafa; width:90%;">'+ datetime +'</div>';
    $(content).insertBefore(parent[0]);

    // this bit is incorrect
    this.renderer.listen(content, 'click', (event) => {
        this.userClicked(event, this);
    })
}

我需要修改函数以根据函数插入内容,但也需要侦听click事件,以便将事件传递给userClicked()函数

1 回复 | 直到 6 年前

Hemaidia Hatim 6 年前

使用角度渲染器2 insertBefore方法

export class AppComponent implements OnInit {
  @ViewChild('clickablediv') el: ElementRef;

  constructor(private _renderer: Renderer2) { }

  ngOnInit() {
    this._renderer.listen(this.el.nativeElement, 'click', (event) => {
      this.generateTimestampDiv(new Date())
    });
  }

  generateTimestampDiv(date) {
    let minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
    let datetime = date.toDateString() + ' ' + date.getHours() + ':' + minutes;

    const div = document.createElement('div');
    div.style.backgroundColor = "#fafafa";
    div.style.width = "90%";
    div.innerHTML = datetime;

    this._renderer.insertBefore(this.el.nativeElement.parentNode, div, this.el.nativeElement)
  }
}

demo

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前