Как правильно использовать pre- Angular, DOM-манипулирование Javascript в Angular (9)? - PullRequest
Новая
       10

Как правильно использовать pre- Angular, DOM-манипулирование Javascript в Angular (9)?

1 голос
/ 11 января 2020

Хотя Angular является зрелым, есть еще много полезных компонентов и служебных библиотек, которые еще не имеют Angular оболочек для них.

В настоящее время я смотрю на один из них Swiper для добавления карусели изображений, и для инициализации карусели изображений используется очень приятный (но также очень предварительный Angular) синтаксис. (На самом деле у него есть сторонняя оболочка , но я бы хотел понять, как создать свою собственную):

Swiper (pre- angular) 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?

Я думаю, что могу запутаться в практических возможностях форсирования этого. Что меня действительно интересует, так это что это за 1017 *? Какой подход не будет связываться с циклами рендеринга et c?

Является ли этот подход правильным? 

## 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>

NB Я не запускал этот скрипт, так что почти наверняка ошибки syntacti c - что меня больше интересует является ли подход правильным

...