如何获取<；p>；标记动态值并使用angular 2将其传递到typescript中

我在app.component.html中有下面的html标记

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

app.component.html：

输出：

null

但是#演示仍然有价值

最新更新：

app.component.ts:

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

     export class AppComponent implements OnInit {
      @ViewChild('demo', { static: false }) private dynamicRef: ElementRef<HTMLElement>;

     getvalue() {
       return this.dynamicRef.nativeElement.innerHTML;    
    }

     alert(this.getvalue);

ERROR TypeError: Cannot read property 'nativeElement' of undefined

最终-工作更新：

将#demo添加到
标签中，解决了此问题

谢谢大家
 将ViewChild装饰器与模板引用和ElementRef包装一起使用

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

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

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

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

从'@angular/core'导入{AfterViewInit，Component，ElementRef，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
模板：“动态值”
，
})
导出类AppComponent实现AfterViewInit{
@ViewChild（'dynamic'，{static:false}）私有dynamicRef:ElementRef；
获取值（）{
返回this.dynamicRef.nativeElement.innerHTML；
}
ngAfterViewInit（）{
console.log（'p的值：'，this.value）//p的值：动态值
}
}

如果要确保组件需要时ViewChild中的引用存在，请使用ngAfterViewInit钩子而不是ngOnInit

下面是一个工作示例（开放控制台）：
将ViewChild装饰器与模板引用和ElementRef包装一起使用

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

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

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

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

从'@angular/core'导入{AfterViewInit，Component，ElementRef，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
模板：“动态值”
，
})
导出类AppComponent实现AfterViewInit{
@ViewChild（'dynamic'，{static:false}）私有dynamicRef:ElementRef；
获取值（）{
返回this.dynamicRef.nativeElement.innerHTML；
}
ngAfterViewInit（）{
console.log（'p的值：'，this.value）//p的值：动态值
}
}

如果要确保组件需要时ViewChild中的引用存在，请使用ngAfterViewInit钩子而不是ngOnInit

下面是一个工作示例（开放式控制台）：
您尝试过什么吗？另外，如何调用
getValue
？我不知道如何获取值。谷歌搜索了一下，但到目前为止还不走运。首先，您可以使用纯javascript
document.querySelector（“#demo”）。innerHTML
我不确定如何获得标记值。我的假设刚刚提到。即使不确定它的预期用途。如果您有Id，也可以使用函数
document.getElementById（'demo'）
或
document.querySelector（'#demo'）
来获取
标记的节点，您可以访问
innerHTML
属性来访问内容。看我之前的评论。你试过什么了吗？另外，如何调用
getValue
？我不知道如何获取值。谷歌搜索了一下，但到目前为止还不走运。首先，您可以使用纯javascript
document.querySelector（“#demo”）。innerHTML
我不确定如何获得标记值。我的假设刚刚提到。即使不确定它的预期用途。如果您有Id，也可以使用函数
document.getElementById（'demo'）
或
document.querySelector（'#demo'）
来获取
标记的节点，您可以访问
innerHTML
属性来访问内容。请参阅我之前的评论。我是否需要在文件中提及模板？因为的值是动态的，在app.component.html文件中。不，模板可以是内联的，也可以是URL，这无关紧要。如果你想在ngOnInit中使用，你需要使用static:true
@ViewChild（'dynamic'，{static:true}）private dynamicRef
，但仍然失败。使用最新查找更新了问题您需要使用角度模板参考，而不是HTML id。这是：
值
，而不是：
值
。我需要在文件中提及模板吗？因为的值是动态的，在app.component.html文件中。不，模板可以是内联的，也可以是URL，这无关紧要。如果你想在ngOnInit中使用，你需要使用static:true
@ViewChild（'dynamic'，{static:true}）private dynamicRef
，但仍然失败。使用最新查找更新了问题您需要使用角度模板引用，而不是HTML id。这是：
值
，而不是：
值
。
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

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

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

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