請(qǐng)問(wèn)一些 ng4.x里面引入輪播組件 無(wú)法執(zhí)行下面的的命令喇完，npm install @types/swiper --save
npm install @types/swiper --save-dev 應(yīng)該怎么解決呢寡润？
話不多說(shuō) 提澎，反正網(wǎng)上的資料拿過(guò)來(lái)了跑項(xiàng)目，直接把環(huán)境裝掛了晴楔，最終的罪人是無(wú)法翻墻，所以會(huì)報(bào)如下的錯(cuò)誤：
2.png
3.png
然后各種找文章博客，都沒(méi)用芜繁，都一樣的告訴你他們就是這么裝成功的。
推薦幾篇我覺(jué)得很靠譜的博客地址：
1.https://blog.csdn.net/qishuixian/article/details/78798160（angular2_引入第三方文件之swiper的引入）
2.http://www.reibang.com/p/98556affbf（Angular中使用Swiper）
3.http://www.imooc.com/article/73236
4.https://www.cnblogs.com/wangzhichao/p/7905251.html（# angular4（2-2）angular腳手架引入第三方類庫(kù)(swiper)
）
5.https://blog.csdn.net/qq_39511525/article/details/80367334（這篇博客沒(méi)看懂開頭的那兩個(gè)引入）
說(shuō)了這么多绒极，解決方案如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
其他人推薦的是淘寶鏡像源：http://www.reibang.com/p/fae87fef8ad0（參考這個(gè)吧骏令，我就不搬了）
放一張我執(zhí)行成功的圖：
5.png
暫時(shí)先到這里，后面有問(wèn)題再繼續(xù)跟進(jìn)集峦，主要界面要寫一個(gè)效果伏社，想來(lái)還是加個(gè)插件來(lái)做：
6.png
可以參考如下效果圖：
ng加入輪播插件.gif
靜態(tài)界面：
<div class="swiper-container">
<div class="swiper-wrapper" >
<div class="swiper-slide tl-color-0">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-1">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-2">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-3">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-4">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-5">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-6">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<div class="swiper-slide tl-color-7">
<div class="swiper-slide tl-card">
<div class="tl-font-30 tl-p-b6">40</div>
<div class="tl-font-14 tl-p-b6">一級(jí)會(huì)員人數(shù)</div>
<div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
<div class="tl-font-12"><span>充值:￥5000</span> <span>贈(zèng)送:￥500</span></div>
</div>
</div>
<!--<div class="swiper-slide tl-color-3">Slide 3</div>
<div class="swiper-slide tl-color-2">Slide 4</div>
<div class="swiper-slide tl-color-1">Slide 5</div>
<div class="swiper-slide tl-color-5">Slide 6</div>
<div class="swiper-slide tl-color-1">Slide 7</div>
<div class="swiper-slide tl-color-2">Slide 8</div>
<div class="swiper-slide tl-color-3">Slide 9</div>
<div class="swiper-slide tl-color-4">Slide 10</div>-->
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Css
.tl-card{
padding-left: 20px;
padding-right: 20px;
display: block!important;
}
.tl-card2{
width:210px;
height:123px;
border-radius:6px;
float: left;
margin-right: 17px;
padding-left: 20px;
padding-right: 20px;
}
.tl-color-0{
background: #FDAF94;
}
.tl-color-1{
background: #F7D570;
}
.tl-color-2{
background: #88BDF7;
}
.tl-color-3{
background: #A78BFA;
}
.tl-color-4{
background: #5EE7BB;
}
.tl-color-5{
background: #A3E96B;
}
.tl-color-6{
background: #DC8BFA;
}
.tl-color-7{
background: #FB8D8D;
}
.tl-font-30{
font-size:30px;
font-family:'PingFang-SC-Bold';
font-weight:bold;
color: #ffffff;
}
.tl-font-14{
font-size:14px;
font-family:'PingFang-SC-Bold';
font-weight:bold;
color: #ffffff;
}
.tl-font-12{
font-size:12px;
font-family:'PingFang-SC-Bold';
font-weight:bold;
color: #ffffff;
float: left;
}
.tl-p-b6{
margin-bottom: 6px;
display: flex;
}
/********* 這里來(lái)展示輪播圖的效果******************************************/
.swiper-container {
width: 96%;
height: 120px;
margin: 20px;
padding-left: 20px;
}
.swiper-slide {
width: 250px!important;
height: 120px!important;
margin-right: 38px!important;
margin-left: 30px!important;
text-align: center;
border-radius:6px;
/*text-align: center;
font-size: 18px;
!* Center slide text vertically *!
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;*/
}
初始化函數(shù)抠刺，在頂部用這種引入全局變量的模式初始化Swiper，如果用import的模式不知為啥摘昌，new Swiper會(huì)報(bào)語(yǔ)法錯(cuò)誤
3.png
參考一篇博客：# Angular4中使用后臺(tái)去數(shù)據(jù)速妖，Swiper不能滑動(dòng)的解決方法
https://www.cnblogs.com/jack-lin/p/7195874.html
onloaded(){
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3, //啟用網(wǎng)格模式，每次滑動(dòng)三個(gè)
slidesPerGroup : 3,
observer:true,//修改swiper自己或子元素時(shí)聪黎，自動(dòng)初始化swiper （必須加）
observeParents:true,//修改swiper的父元素時(shí)罕容，自動(dòng)初始化swiper (必須加)
navigation: { //展示左右兩側(cè)的箭頭圖標(biāo)
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}
ngOnInit(): void {
console.log('Swiper',Swiper);
this.getMemberChartData('d');
// this.onloaded(); //如果在這里初始化會(huì)出現(xiàn)數(shù)據(jù)沒(méi)有返回，就開始渲染的問(wèn)題稿饰，導(dǎo)致swiper報(bào)錯(cuò)锦秒，如果是靜態(tài)界面可以這里初始化
}
ngAfterViewInit(){
this.onloaded();
}
前提條件，你需要引入swiper插件：
angular4.x 如何正確的引入swiper插件http://www.reibang.com/p/629e9908c1b3
