如何获取 标签动态值，并使用angular 2将其传递到Typescript中

Question

我在app.component.html中具有以下html标记

  <p id="demo">dynamicValuegoeshere!!!</p>

上面的段落具有一些由javascript插入的动态值。但是目前我正在使用类型脚本，并尝试获取上述值并将其作为函数的输入参数传递。

我期望app.component.ts文件中的结果如下：

getValue(dynamicvalue){
console.log(dynamicvalue)  //It should print the current value of the <p id="demo"> which is dynamicvaluegoeshere!!!!
}

有人可以帮助我实现这一目标吗？如何读取特定的<P>标记值并将其传递到app.component.ts文件中

已更新：

我只是使用以下代码在app.component.ts文件中获取结果

getValue()
{
 alert(document.getElementById("#demo").innerHTML);
}

app.component.html：

输出：

null

但是#demo仍然有价值。

Answer 1

使用ViewChild装饰器以及模板引用和ElementRef包装器。

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<p #dynamic>Dynamic value</p>',
})
export class AppComponent implements OnInit {
  @ViewChild('dynamic', { static: false }) private dynamicRef: ElementRef<HTMLElement>;

  get value() {
    return this.dynamicRef.nativeElement.innerHTML;    
  }

  ngOnInit() {
    console.log('value of p: ', this.value) // value of p: Dynamic value
  }
}