Trung tâm cá nhân
sách gpt4 ăn đã đi

angular - 在创建 DOM 后向元素添加事件

In lại 作者：太空狗 更新时间：2023-10-29 17:18:08 25 4
mua khóa gpt4 giày nike

我想弄清楚如何在元素添加到 DOM 后向其添加事件。

现在，我有这样的东西:

import {Component} from 'angular2/core';

@Component({
    selector : 'sub-child',
    template : '
'
})

export class SubChildClass
{
    private html:string;
    private buttonText:string;

    constructor()
    {
        this.buttonText = 'A new button';
        this.create();
    }

    private create()
    {
        this.html = ""
    }

    private new()
    {
        this.buttonText = "Text Changed";
    }
}

不起作用的部分是:

this.html = ""

此时 Angular 2 不知道如何处理 (click)='new()'。我不太确定这样做的正确方法是什么。

我希望能够在稍后通过一些相应的事件将 HTML 添加到 DOM。

我没有使用过 Angular 1。但听起来这曾经相当于 $compile in Angular 1 .其他一些帖子建议使用 Dynamic Content Loader对于这样的东西。但这似乎不是这个用例的正确答案。因此，我们将不胜感激任何帮助或指导。谢谢，

câu trả lời hay nhất

更新的建议

import {Component} from '@angular/core';

@Component({
  selector: 'special-button-component',
  template: ''
})
export class SpecialButtonComponent{
  public buttonText: string = 'A New Button';
  public changeText(): void{
    this.buttonText = 'Text Changed';
  }
}

@Component({
  selector : 'sub-child',
  template : '
'
})
export class SubChildClass{}

原始答案 (由于从 Angular 2 中删除了 BrowserDomAdapter，因此不再有效)

Nếu bạn真的想要绑定(bind)到一个已注入(inject)的非模板 DOM 元素，那么您可以使用 Angular2 的一些未记录的功能以良好的“老式方式”设置事件监听器

import {Component, ElementRef} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';

@Component({
  selector : 'sub-child',
  template : '
'
})
export class SubChildClass
{
  private html:string;
  private buttonText:string;

  constructor(private elementRef: ElementRef, private domAdapter: BrowserDomAdapter)
  {
    this.buttonText = 'A new button';
    this.create();
  }

  private create()
  {
    let button = this.domAdapter.createElement('button');
    button.innerHtml = this.buttonText;
    this.domAdapter.on(button, 'click', this.new.bind(this));
    this.domAdapter.appendChild(this.elementRef.nativeElement, button);
  }

  private new()
  {
    let button = this.domAdapter.querySelector(this.elementRef.nativeElement, 'button');
    button.innerHTML = "Text Changed";
  }
}

但这有什么意义……如果我们只是降到这个级别，为什么首先要使用 Angular 。我还在生产中的企业应用程序中使用 Angular2。对于此功能，我的选择是创建 cái nút 本身作为组件，然后使用 DynamicComponentLoader 将元素注入(inject)。

关于angular - 在创建 DOM 后向元素添加事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35210072/

25 4 0
Đề xuất bài viết: c - vim 或 nano 等图形需要哪些库？
Đề xuất bài viết: C中的字符计数
Đề xuất bài viết: c - union 中的 union
Đề xuất bài viết: angular - 如何动态创建多个输入，然后可以在 Angular 2 中获取它们的值？
太空狗
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress