Question

我有角度

的组件

在component.ts中，我有一行代码来搜索html元素

var myArticle = document.querySelector('article');

此返回null

component.html中的

<article id="bodyArticle" *ngIf="isClicked"></article>

但是当我在兄弟组件中使用文章时。

var myArticle != null from component.ts

如何在所有文件项目中使用querySelector serach元素？

我还有其他问题。在同一个componen.html我有按钮

<div class="btnGrp">
  <button (click)="loadXML($event)">Load</button>
  <input type="file" name="img" multiple (change)="onChange($event)">
</div>
<article id="bodyArticle" *ngIf="isClicked"></article>

当我点击按钮时，首先发出的一次点击值为true，我必须点击第二次按钮才能将该内容加载到文章内容

来自component.ts的

片段

  loadXML(event?: Event) {
    var myArticle = document.querySelector('article');
    console.log(myArticle);
    if(this.imageService.getBodyRes() == ''){
      myArticle.textContent = 'Error can't load data';
      this.isClicked = true;
      this.xmlLoadedEvent.emit(this.isClicked);
    } else {
      myArticle.textContent = this.imageService.getBodyRes();
      console.log(myArticle.textContent);
      this.isClicked = true;
      this.xmlLoadedEvent.emit(this.isClicked);
    }
  }

当我点击文章标签中的按钮ngIf设置真值以及没有dobule点击的loadData时，如何做到这一点。

Answer 1

尽量避免在Angular中使用文档对象及其方法。如果你试图这样做，它将使你的生活变得非常困难。

 <article #articleId id="bodyArticle" *ngIf="isClicked"></article>

您可以在文章标记上放置模板变量名称，然后使用角度＆＃39; ViewChild＆＃39;进行查询。这样的课 -

 import { Component, ViewChild, ElementRef,  ...others?....} from '@angular/core'

export class MyComponent {

   articleToggle: boolean = false; // add a toggle in your component for turning the article on 

   @ViewChild('articleId') article: ElementRef;

   ngAfterViewInit() {
       this.article.nativeElement.<<access DOM attributes here>>
   }
}

这将使您可以访问DOM节点，就像您希望文档查询已经完成一样，但即便如此，仍然可能有更好的方法来执行您正在做的事情，特别是因为您提到您正在尝试使用兄弟组件中的文章。如果是这种情况，你可能想让它成为自己的组件，让你完全避免查询，但再一次，用这么少的信息就不可能知道。

此外，通常建议避免在打字稿中完全与null进行比较。使用＆＃39; undefined＆＃39;代替。

<button (click)="loadXML($event); articleToggle = true">Load</button>

单击时将变量设置为true，然后输入文章。

<article #articleId id="bodyArticle" *ngIf="articleToggle"></article>

现在它会在第一次点击按钮后显示，因为这将是值从false变为唯一的时间 - ＆gt;真。

奇怪的行为querySelector

1 个答案: