Question

我正在尝试将伟大的PhotoSwipe-gallery（JavaScript）实现到我的第一个 Angular2-Project （Typescript）中，这个让我很头疼。

所以PhotoSwipe是用JavaScript编写的。通过它的实例化，访问由类名＆＃39; my-gallery＆＃39; 标记的特定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获取我的图像，所以也许脚本在我的画廊＆＃39;之前运行。已加载，但尝试从index.html加载其他元素也失败了。

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

非常感谢帮助。

Answer 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;
    }
}

Angular2：如何使用Javascript从index.html访问DOM-Element（在Component中）

1 个答案: