javascript - Angular 5 viewchild 只能工作一次

Question

为了了解我的问题，这里有一个关于正在发生的事情和没有发生的事情的解释:

我有上传 .zip 文件的上传功能，获取所有 html 代码、图像并将其转换为字符串。对于每次上传，它都会重复，之后当我加载该 .zip 文件时，它总是会提取它并将其所有内容转换为字符串 -> 然后我将其放入 .zip 文件中。问题是它只能工作一次(将字符串放入 iframe)。

它的工作原理如下:

我获取 zip 文件并调用 ShowVisualContent() 将其所有内容转换为字符串。所有字符串都在我的 navService -> this.html: string;

   this.uploads = this.db.list(`profile/${this.auth.userId}/projects/${this.projectId}`).snapshotChanges().map((actions) => {
      return actions.map((a) => {
        const data = a.payload.val();
        this.navSrv.showVisualContent(data.url, data.name);
        const $key = a.payload.key;
        const $ref = a.payload.ref;
        return { $key, ...data, $ref };
      });
    });

然后在我的组件中我得到了 html:string;

 @ViewChild('html') html: ElementRef;
 loadHtml(){

    setTimeout(()=> {
      this.html.nativeElement.src = 'data:text/html,' + encodeURIComponent(this.navSrv.html);
    },4000);
    console.log("Loading html into iframe now")
  }

并将其加载到 html 中，如下所示:

<div  *ngFor="let upload of uploads | async">
  <iframe style="min-width:1300px;min-height:800px;" id="framex" #html scrolling="no" frameborder="0"></iframe>
 </div>

主要问题是，当我在一个页面中加载大量 zip 文件时，我只得到 1 个包含转换后的 html 字符串的文件。

如何使 this.html 成为全部而不仅仅是一个。

如何从每个函数调用中获取数组形式的值:

html: string;
      this.html = xmlDoc.documentElement.innerHTML; 

(这是我将所有 html 放入 this.html 字符串的部分，它只得到最后一个值。)

如何以数组形式获取所有 html？

这是我获取所有 .zip 文件的 innerHTML 的函数:

html:string;


public showVisualContent(contentUrl:string, fileName:string) {
    console.log(contentUrl);
    console.log(fileName);
    let fileInfo = getFileInfo(fileName);
    if(fileInfo) {
      switch(fileInfo.type) {
        case 'archive' : {
          getAllFileContentsFromRemoteZip(contentUrl, (files) => {
            //TODO: Remove timeouts. This is just a temporary option for demonstration purposes.
            //Also this is a massive function that must be separated into multiple functions
            setTimeout(() => {
              let storageRef = firebase.storage().ref();
              for(let i = 0; i < files.length; i++) {
                if(files[i].fileInfo.type == 'image') {
                  // Create a storage reference from our app
                  // Create a reference with an initial file path and name
                  let imageRef = storageRef.child(files[i].fileInfo.fileName);
                  files[i].url = imageRef.getDownloadURL().then((url) => {
                    return url;
                  });
                }
              }

              setTimeout(() => {
                for(let i = 0; i < files.length; i++) {
                  //console.log(files[i].fileInfo.fileName);
                  //console.log(files[i].url);
                  if(files[i].fileInfo.type == 'web') {
                    let parser = new DOMParser();
                    let xmlDoc = parser.parseFromString(files[i].content, "text/html");
                    //scripts
                    let scriptElements = xmlDoc.getElementsByTagName('script');
                    for(let j = 0; j < scriptElements.length; j++) {
                      let attr = scriptElements[j].getAttribute('src');
                      if(attr) {
                        for(let k = 0; k < files.length; k++) {
                          if(attr.includes(files[k].fileInfo.fileName)) {
                            scriptElements[j].removeAttribute('src');
                            scriptElements[j].innerHTML = files[k].content;
                          }
                        }
                      }
                    }
                    //styles
                    let linkElements = xmlDoc.getElementsByTagName('link');
                    for(let j = 0; j < linkElements.length; j++) {
                      if(linkElements[j].getAttribute('rel') == 'stylesheet')
                      {
                        let attr = linkElements[j].getAttribute('href');
                        if(attr) {
                          for(let k = 0; k < files.length; k++) {
                            if(attr.includes(files[k].fileInfo.fileName)) {
                              //do stuff
                              let parentElement = linkElements[k].parentElement;
                              if(parentElement) {
                                let styleElement = parentElement.appendChild(xmlDoc.createElement('style'))
                                styleElement.innerHTML = files[k].content;
                              }
                            }
                          }
                        }
                      }
                    }

                    //images
                    let imgElements = xmlDoc.getElementsByTagName('img');
                    for(let j = 0; j < imgElements.length; j++) {
                      let attr = imgElements[j].getAttribute('src');
                      if(attr) {
                        for(let k = 0; k < files.length; k++) {
                          if(attr.includes(files[k].fileInfo.fileName)) {
                            //do stuff
                            //imgElements[k].setAttribute('src', 'data:image/' + files[k].fileInfo.ext + ';base64,' + files[k].content);
                            imgElements[k].setAttribute('src', files[k].url.i);
                          }
                        }
                      }
                    }
                    //console.log(xmlDoc.documentElement.innerHTML);
                    this.html = xmlDoc.documentElement.innerHTML;
                    for(let j = 0; j < files.length; j++) {
                      if(files[j].fileInfo.type == 'image') {
                        let strings = getStringsToReplace(files[j].fileInfo.fileName, this.html);
                        for(let k = 0; k < strings.length; k++) {
                          this.html = this.html.replace(strings[k], files[j].url.i);
                          this.html = this.html.replace('/' + strings[k], files[j].url.i);
                        }
                      }
                    }
                   // console.log(this.html);
                  }
                }
              }, 500);
            }, 1000);
          });
        }
        case 'web' : {
          //show simple html here. Unlikely to happen
        }
        case 'image' : {
          //show image here
        }
      }
    }
  }

Answer 1

ViewChild 的设计为您提供一个实例，使用 viewChildren :

@ViewChildren('html') htmls: QueryList<ElementRef>;
loadHtml(){

  setTimeout(()=> {
    this.htmls.map((elem) => {
       elem.nativeElement.src = 'data:text/html,' + encodeURIComponent(this.navSrv.html);
    }
  },4000);
  console.log("Loading html into iframe now")
}

为了更好地理解ViewChild & ViewChildren，queryList查看这篇文章https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e