Question

我正在尝试使用angular2

在函数中传递div文本

我在模板中有这个

<div (click)="logThis(this.text)">test</div>

和组件

logThis(x: any){
        console.log(x);
}

如果我放一些文字而不是this.text，它会毫无问题地记录

我也尝试了这个.value但它记录未定义

其他我尝试添加<div #test (click)="logThis(test.text)">test</div>但结果相同

Answer 1

您不能在组件的模板中使用this。你的模板变量方法是正确的，但我认为没有text属性：

<div (click)="logThis(div.innerText)" #div>test</div>
<div (click)="logThis(div.textContent)" #div>test</div>

Answer 2

这里有一个example组件，用于在函数上添加参数元素并获取内部文本或内部html。如果你想让它更动态，你可以创建一个指令。

@Component({
      selector: 'my-app',
      template: `
        <div>
          <h2 #container (click)="GetContainerText(container)">Hello Container </h2>
          <div #container2 (click)="GetContainerText(container2)">Hello Container 2</div>
          <span #container3 (click)="GetContainerText(container3)">Hello Container 3</span>
        </div>
      `,
    })
    export class App {
      constructor() {
      }

      GetContainerText(_container:HtmlElement){
        let _containerText = _container.innerText;
        let _containerHTML = _container.innerHTML;
      } 
    }

你为什么要这样做？也许如果你创建一个变量并在html上绑定对你来说更简单。 HTML用于查看，不用于编码。您从HTML获得的所有内容都必须是输入。 90％的时间你做不同的事情是错误的，必须以更简单的方式思考。

从div获取文本并传递给该函数

2 个答案: