elementRef является нулем после построения углового приложения - PullRequest
Новая
       24

elementRef является нулем после построения углового приложения

0 голосов
/ 20 ноября 2018

В шаблоне компонента я выбираю элемент svg с ElementRef.Он работает нормально, но когда я собираю приложение и открываю его, elementRef имеет значение null. 

    @Component({
      selector: 'app-svg',
      template: `<div id="root">
        <object [data]='trustedUrl' type="image/svg+xml" height="450" width="650" #dataSvg></object>
      </div>`,
      styleUrls: ['./svg.component.css'] 

    })
constructor(private sanitizer: DomSanitizer, private elRef: ElementRef) {    
 }

elementRef target 

@ViewChild('dataSvg') dataSvg: ElementRef;

передать его в переменную elementRef 

ngOnInit() {
    this.elementRef = this.elRef.nativeElement.querySelector('#dataSvg');  
     }

после загрузки содержимого я выбираю svg: 

ngAfterContentInit() {
    const elementRef = this.elementRef;

    // when content is loaded...
    elementRef.addEventListener('load', function (event) {
      // ...retrieve svg element

elementRef.querySelector ('svg') равно нулю

, когдая запускаю ' npm, запускаю сборку ' и захожу в dist / index.html, contentDocument> равен нулю :

enter image description here

Ответы [ 4 ]

0 голосов
/ 28 ноября 2018

Я нашел свое решение совместимости для добавления SVG-элемента:

в моем компоненте svg. Я устанавливаю источник svg с привязкой innerHTML, когда мои входные данные меняются, я загружаю svg сервисом, который возвращаетДанные SVG безопасным способом:

привязка источника данных SVG в компоненте: 

 @Component({
  selector: 'app-svg',
  template: `<div id="root">
    <div [innerHTML]="svgSafe" type="image/svg+xml" height="450" width="650" #dataSvg></div>
  </div>`,
  styleUrls: ['./svg.component.css'] ,
  animations: [

  ]
})

загрузка источника SVG с вводом: 

 ngOninit() {

    var url = this.data.url;


    var id = 1; 

    if(url === 'assets/object_move.svg') {
       id = 1;
    }

    if(url === 'assets/object_wait.svg') {
      id = 2;
    }


    ..
    var dataSVG;
            this
              .loaderService
              .getSVGData(id)
              .subscribe((dataSvg) => {

      this.svgSafe = this.sanitizer.bypassSecurityTrustHtml(dataSvg.data);

            });
    }
0 голосов
/ 20 ноября 2018

Согласно официальному документу , вы не можете получить доступ к элементу @ViewChild, если не сделаете это в хуке AfterView (AfterViewInit или AfterViewChecked) вместо OnInit.

0 голосов
/ 20 ноября 2018

Вы используете @ViewChild('dataSvg') dataSvg: ElementRef;, но в своем шаблоне вы не указали привязку для dataSvg.

Это можно сделать двумя способами: 1) с помощью @Directive, как описано в Angular Docs 2) с помощью ссылки на шаблон #: в вашем случае: <object ... #dataSvg></object>

Не упоминается, если вы уже используете Директиву, но в коде шаблона у вас есть только id=dataSvg

0 голосов
/ 20 ноября 2018

DOM еще не полностью встроен в ngOnInit.Вам нужно дождаться создания дочерних элементов (шаблон здесь).

Вместо ngOnInit введите свой код в ngAfterViewInit.

Более подробную информацию о перехватах в жизненном цикле компонента можно найти в угловой документации .

...