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

Question

我正在尝试使用angular2在函数中传递div文本

我的模板中有这个

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

并在组件中

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

如果我放一些文本代替this.text它会记录下来，没有任何问题

我也尝试过this.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

这里有一个组件示例 ，可以在函数的元素上添加参数并获取内部文本或内部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％的时间，您做不同的事情是错误的，必须思考更简单的方法。