Question

我正在尝试将一段jQuery代码添加到我上网的组件中。 Specifically this.

我已经在代码中实现了HTML和CSS，但是我在加载jQuery时遇到了麻烦。我在html部分的底部使用了<script>标签，但它似乎无法正常工作。有什么想法吗？

Answer 1

您可以使用ViewChild装饰器获取HTML内容的引用，然后在ngAfterViewInit生命周期钩子内的组件中使用该引用。您可以在组件内的任何位置使用引用但是如果想要做任何类型使用jQuery初始化然后ngAfterViewInit是一个合适的地方。

例如，如果HTML模板具有以下代码。

<!-- my-component.html-->

<section class="cd-hero">
    <ul class="cd-hero-slider">
        <li class="selected">
            <div class="cd-full-width">
                <h2><!-- title here  --></h2>
                <p><!-- description here --></p>
                <a href="#0" class="cd-btn"><!-- btn text here --></a>
            </div> <!-- .cd-full-width -->
        </li>

        <!-- othe slides here -->

    </ul> <!-- .cd-hero-slider -->

    <div class="cd-slider-nav" #cdSliderNav >
        <nav>
            <span class="cd-marker item-1"></span>

            <ul>
                <li class="selected"><a href="#0">Intro</a></li>
                <li><a href="#0">Tech 1</a></li>
                <!-- other navigation items here -->
            </ul>
        </nav> 
    </div> <!-- .cd-slider-nav -->
</section> <!-- .cd-hero -->

然后我可以在我的组件中获得cdSliderNav变量的引用，如下所示。

//myComponent.ts

declare var jQuery: any

@Component({
  selector:'my-component',
  templateUrl:'my-component.html',
  styleUrls:['my-component.css']
})
export class MyComponent implements AfterViewInit{
  @ViewChild('cdSliderNav') cdSliderNav:ElementRef;

  ngAfterViewInit() {
      jQuery(this.cdSliderNav.nativeElement).on('click',
       event => {
                   //Handle click event here..
                  console.log(event);
                }
      )
  }
}

如果你不想为每个组件文件分别声明它，你也可以在你的打包文件中声明jQuery变量。并确保你已经在你的index.html文件中包含了jQuery文件。

一旦我们获得了对主div的引用，我们就可以使用jQuery方法来选择它的子节点或者使用jQuery做任何我们想做的事情。对于前要选择li中的cdSliderNav元素，我可以使用find()方法。

jQuery(this.cdSliderNav.nativeElement).find('li')

我希望这会有所帮助。

将JQuery插件添加到Angular 2组件

1 个答案: