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

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

问题点：

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

  
  
  image.png
  
  

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

刚开始我嵌套后页面会出现两组箭头，并且在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',
              },
        };