第三次分享总结

一、属性绑定的innerHTML和直接纯js的innnerHTML区别

纯js的

document.getElementById("htmlcontent").innerHTML = this.htmlcontent;

这种方式可以把css样式也按照css标签和html标签插入文本显示
然而属性绑定的

 innnerHTML:[innerHTML]="this.htmlcontent";

这种插入方式只能识别html标签，而标签里内嵌的css样式无法识别
PS：踩了一个小坑。记录一下
另外：
属性绑定可以用的活一点
定义一个变量，即可把该变量的值直接复制绑定给一个属性

二、设置多行文本超出显示省略号，在手机端超出部分无法隐藏解决方法

方法一：

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

   p{
  position:relative;
  line-height:1.4em;
  /* 3 times the line-height to show 3 lines */
  height:4.2em;
  overflow:hidden;
}

p::after{
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding:020px1px45px;
  background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

但是效果不好看

方法二：

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

但是会出现BUG，会出现超出部分溢出不影藏
结果：我综合了两种方法如下。给给定换行数，同时给定高度和行高限制。
html:

  <p>显示超过两行就显示省略号，其余隐藏，隐藏不了的情况下给这个模块添加一个高度和行高
，高度是行高的两倍</p>
</div>
css:
.caption {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #999999;
  line-height: 15px;//
  height:30px;///* 2行隐藏就两倍，三行隐藏就三倍*/
}

三、动态设置video的宽高的方法，js设置和CSS设置

一、csss设置

<div class="wrap">
    <video controls="controls"  class="videoBox" #iframeurl>
        <source src="3a1be272f8b.mp4" type="video/mp4" />
    </video>
</div>
css:
.wrap{
    width:100%;
    position:relative;
    padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 0;
    video{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%
    }
}

JS的方法：

思路：用js获取到当前video的DOM，再对DOM进行动态的宽高设置
以下是以angular的例子展示，在纯JS里面也是一样的道理
html:
<video controls="controls" class="videoBox" #iframeurl>
<source src="a1be272f8b.mp4" type="video/mp4" />
</video>
TS:
获取DOM的方法

@ViewChild('iframeurl') iframeurl:ElementRef;
let iwidth = screen.width;
let iheight = iwidth*0.62;
console.log(iheight+"高度"+iwidth);
this.iframeurl.nativeElement.style.width = iwidth+"px";
this.iframeurl.nativeElement.style.height = iheight+"px";

四、ionic2中ion-slides轮播图报错Uncaught TypeError: Cannot read property 'hasAttribute' of undefined

在使用ionic2的轮播图时会报错：

    at autoplay (swiper.js:175)
    at startAutoplay (swiper.js:218)
    at initSwiper (swiper.js:164)
    at Slides._initSlides (slides.js:828)
    at slides.js:527
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3863)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)

解决方法：
加一个判断，判断轮播的数组有值再显示
注意判断轮播数组的长度的时候会出现length属性未定义的报错，这是由于页面加载的时候模板先加载了，componnent还没有加载，就没有渲染模板之前模板就加载了导致模板加载的时候没有读取到轮播数组，所以会报错，解决方法：
在component里面定义一个参数，在获取到轮播数组的时候就获取该数组的长度值赋给这个参数，然后在模板里面用这个参数去做判断；
定义参数获取当前轮播数组长度
this.len=this.list.length;
判断

<ion-slides class="slide"  [pager]="true" [loop]="true" autoplay="3000" *ngIf="len >=1" >
    <ion-slide *ngFor="let slide of list" >
        <a href="{{slide.LinkUrl}}" (click)="bannerDetail(slide)">
            <img src="{{slide.PicUrl}}">
        </a>
        <div class="slidesTitle">
            <div class="iteming">
                <span class="title">{{slide.Title}}</span>
            </div>
        </div>
    </ion-slide>
</ion-slides>