Как получить значение динамического тега <p>c и передать его в машинописный текст, используя angular 2 - PullRequest
Новая
       24

Как получить значение динамического тега <p>c и передать его в машинописный текст, используя angular 2

0 голосов
/ 28 января 2020

У меня есть тег html ниже в app.component. html

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

В вышеприведенном абзаце есть какое-то динамическое значение c, которое вставляется 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:

<input type="submit" value="Submit" (click)="getValue()" id="submitBtn2" class="btn-primary btn-xs">

Вывод: 

null

Но у #demo все еще было значение.

Последнее обновление:

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);

Выход:

this.dynamicRef.nativeElement.inner HTML

enter image description here

Обновления - последние:

Использовано alert(this.getValue())

Возвращено: 

ERROR TypeError: Cannot read property 'nativeElement' of undefined

Final - рабочее обновление :

Добавлен #demo в тег <p>, который решил эту проблему.

Спасибо всем ...!

1 Ответ

4 голосов
/ 28 января 2020

Используйте декоратор 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
  }
}

Если вы хотите убедиться, что ссылка в ViewChild присутствует, когда ваш компонент нуждается в ней, используйте вместо этого хук ngAfterViewInit из ngOnInit.

Вот рабочий пример (открытая консоль): stackblitz

...