Angular2：如何使用 Javascript 从 index.html 访问 DOM-Element（组件内部）答案

【问题标题】：Angular2: How to access DOM-Element (inside Component) from index.html with JavascriptAngular2：如何使用 Javascript 从 index.html 访问 DOM-Element（组件内部）
【发布时间】：2017-01-28 19:00:43
【问题描述】：

我正在尝试将出色的 PhotoSwipe-gallery (JavaScript) 实现到我的第一个 Angular2-Project (Typescript) 中，这真的让我很头疼。

所以 PhotoSwipe 是用 JavaScript 编写的。通过它的实例化它访问由类名'my-gallery'标记的特定DOM元素并解析所有显然包含图像数据的子元素。

这是我想要实现的一个非常简单的版本：

index.html

<body> 
  <my-app>
   <router-outlet></router-outlet>
      <my-images>
        <div class="my-gallery">
            <-- images -->
        </div>
      </my-images>  
  <my-app>
  <script>
    <--Want Access to class 'gallery' -->
    myGallery = document.querySelectorAll('my-gallery');
  </script>
<body>

在上面的版本中，myGallery 是一个空对象，所以我想知道这是否可以从 index.html 中访问元素，这些元素位于 Angular2 的其他组件中。

另一个原因可能是，我实际上是通过 http.get-request 获取图像，所以脚本可能在加载“my-gallery”之前运行，但尝试从 index.html 加载其他元素也失败了.

这是一个非常简化的版本。实际上，我正在运行一个实例化 PhotoSwipe 对象的脚本。当然，我尝试直接从组件内部运行脚本，显然你不能在组件模板中运行 JavaScript 文件。

非常感谢您的帮助。

【问题讨论】：

您的脚本在模板加载之前执行。为什么不为此创建适当的组件？所以你可以在ngAfterViewInit钩子里调用脚本。

标签： javascript html dom angular typescript

【解决方案1】：

如果您希望您的内容位于元素标签内，您需要在模板中插入 ng-content 元素。

index.html

<body> 
  <my-app>
   <router-outlet></router-outlet>
      <my-images>
        <div ref-myGallery class="my-gallery">
            <-- images -->
        </div>
      </my-images>  
  <my-app>
  <script>
    <--Want Access to class 'gallery' -->
    myGallery = document.querySelectorAll('my-gallery');
  </script>
<body>

my-image.component.ts

import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
    selector: 'my-images',
    template: `<ng-content></ng-content>`,
})
export class MyImageComponent implements AfterContentInit  {
    @ContentChild('myGallery', { read: ElementRef }) myGalleryEl: ElementRef;

    ngAfterContentInit() {
        var myGallery = this.myGalleryEl.nativeElement;
    }
}

【讨论】：