Angular에서 swiper가 움직이지 않는다! !

Angular에서 swiper를 사용하여 슬라이드 쇼 녀석을 만들려고합니다.
이 기사을 참고로 구현하려고했지만 "<", ">"를 눌러도
전혀 반응하지 않고, 여러가지 시험한 결과, 어떻게든 반응해 주었으므로,
그 결과를 남겨둔다.

덧붙여서 각 버전은 아래와 같이 Death!
Angular: 10.1.6
swiper :6.3.4

결론

swiper slideNext 방법 부르면 움직인다.

component.ts측

slideNext():void{
    this.swiper.slideNext();
  }

HTML 측

 <div class="swiper-button-next" (click)="slideNext()"></div>

했던 일

우선은 HTML측에 결정의 구성을 기술.

 <div class="swiper-container columns is-centered">
    <div class="swiper-wrapper column is-6">
      <div class="swiper-slide">slider1</div>
      <div class="swiper-slide">slider2</div>
    </div>
    <div class="swiper-button-next" (click)="slideNext()"></div>
    <div class="swiper-button-prev" (click)="slidePrev()"></div>
  </div>

그리고 component.ts 측의 초기 처리에서 swiper 인스턴스의 생성과 프로퍼티 설정

ngOnInit(): void {
    this.swiper = new swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }

상기의 설명에서, 스와이프에 의한 전환은 움직이지만,
"<"">"버튼을 누르면 전환되지 않습니다. . .

Google 선생님에게 질문했더니 아래 사이트에 도착한다.
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 49810045 / 슈페 r의 t를 r 킨 g

선생님의 번역 내용을 본 한, 발생하고 있는 내용이 동일하다.
그리고 최고의 답변은 HTML을로드하기 전에 swiper를 초기화하고,
설정이 없게 되어 있지 않지? 그러니까, 표시된 후에 생성해 버리는 YO!
라는 것 같기 때문에, 상기의 ngOnInit()가 아니라, ngAfterViewInit()로 인스턴스 생성해 보았다.

 ngAfterViewInit() {
    this.swiper = new swiper('.swiper-container', {
      loop: true,
      navigation: {
        nextEl:   '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
}

그래, 움직이지 않아! 디버그로 쫓아 본 느낌, 따로 초기화되어있는 것도 없을 것 같아!
어쩌면 원래 swiper 측에서 무엇을하고 있습니까? 궁금해서 생각했는데

/node_modules/swiper/swiper-bundle.js

 onNextClick: function onNextClick(e) {
      var swiper = this;
      e.preventDefault();
      if (swiper.isEnd && !swiper.params.loop) return;
      swiper.slideNext();
    },

과연, 그래. . . . slideNext 부르면 좋을까?
라고 하는 것으로, 처음에 쓴 결론이 됩니다.

끝까지 읽어 주셔서 감사합니다.

그런 일도 더 좋은 방법이 있습니다!
라는 의견, 어드바이스 절찬 모집중입니다!
잘 부탁드립니다