javascript - 在 Angular(9) 中使用前 Angular、DOM 操作 Javascript 的正确方法是什么？

Question

尽管 Angular 已经成熟，但仍有许多有用的组件和实用程序库还没有 Angular 包装器。

我目前正在寻找一个名为Swiper的用于添加图像轮播的方法，它使用非常好的（但也非常前 Angular）语法来初始化图像轮播。（它实际上有一个第三方包装器，但我想了解如何构建我自己的）：

Swiper（前角）HTML

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Swiper Javascript API

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

将其集成到 Angular 中的最佳方法是什么？

我想我可以应付强迫这一点的实际情况。我真正感兴趣的是要做什么Angular Way？什么方法不会弄乱渲染周期等？

这种方法正确吗？

## mycomponent.ts

import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-home-hero',
  templateUrl: './home-hero.component.html',
  styleUrls: ['./home-hero.component.scss']
})
export class HomeHeroComponent implements  OnInit, AfterViewInit {

  constructor() { }

  // Attach the DOM element with the container to a variable 
  // that we can reference later
  @ViewChild('swipercontainer', {read: ElementRef})
  swipercontainer: ElementRef;

  // once the view has been initialised, run the Swiper functionality
  ngAfterViewInit() {
    new Swiper(this.swipercontainer, {
      speed: 400,
      spaceBetween: 100
    });
  }
}

## mycomponent.html

<div #swipercontainer class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

注意我没有运行这个脚本，所以几乎可以肯定是语法错误——我更感兴趣的是这种方法是否正确

标签： javascriptangularswiperangular9