angular中使用swiper遇到的坑-左右箭头在轮播图外

项目是angular框架，在使用swiper插件的时的坑

问题点：

• swiper本身的左右箭头是在图里面的，如图：

  
  image.png
  

  现在想要实现箭头在图片外，网上找了找资料，需要再swiper标签外再嵌套一层

<div> 
            <swiper [config]="bannerConfig">
                <div *ngFor="let bannerData of bannerList;let index = index;" (click)="openNewLink(bannerData.url)">
                    <div class="swiper-img">
                        <ng-container>
                            <img [id]="'banner' + bannerIndex" class="img"
                                src="{{bannerData.bannerPath}}">                          
                        </ng-container>
                    </div>
                </div>
            </swiper>
            <div class="swiper-button-prev swiper-button-white" aria-label="Previous slide" id="swiper-button-prev"></div>
            <div class="swiper-button-next swiper-button-white" aria-label="Next slide" id="swiper-button-next"></div>
        </div>

刚开始我嵌套后页面会出现两组箭头，并且在swiper外面这组箭头空有样式，没有功能，点击无效果；
找了半天原因，原来是navigation里面的绑定元素出了问题，里面默认的是绑定按钮的class,当外部嵌套后会在初始化的时候出现默认样式的在图片内的箭头，并且navigation绑定到了第一个class为swiper-button-next的按钮上，现在我在外部按钮上添加一个id后在navigation上绑定id就解决了，注意看上面DOM上的id
ts 代码如下：

this.bannerConfig = {
            loop: bannerLoop,
            preloadImages: true,
            updateOnImagesReady: true,
            loopFillGroupWithBlank: bannerTypeWithBlank,
            slidesPerView: 4,//bannerTypeConfig,
            slidesPerGroup: 1,//bannerTypeConfig,
            spaceBetween:10,//bannerTypeBetween,
            centeredSlides: true,   
            observer: true,
            observeParents: true,
            observeSlideChildren: true,
            lazy: false,
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '#swiper-button-next',
                prevEl: '#swiper-button-prev',
              },
        };