Angular 2中Kendo Upload组件文件列表隐藏方法求助

我之前也碰到过Kendo Upload样式不生效的情况，主要是Angular的视图封装机制在搞鬼，给你几个有效的解决方案，按优先级推荐：

1. 优先使用官方配置项（最稳妥） #

Kendo Upload本身就提供了控制文件列表显示的属性，完全不需要写CSS！直接在组件模板里设置showFileList为false即可：

<kendo-upload
  [saveUrl]="你的上传接口地址"
  [showFileList]="false"
></kendo-upload>

这个是官方设计的功能，不会有样式冲突或者优先级的问题，是最优解。

2. 样式穿透解决优先级问题 #

如果因为某些原因没法用配置项，那可以用Angular的::ng-deep来穿透组件的样式隔离，强制覆盖Kendo的默认样式：

::ng-deep .k-upload-files {
  display: none !important;
}

• ::ng-deep可以突破Angular的视图封装，让样式作用到子组件内部
• !important是为了确保我们的样式优先级高于Kendo自带的样式

3. 关闭组件视图封装（慎用） #

你也可以关闭当前组件的视图封装，让写的CSS直接全局生效，但要注意给样式加范围限定，避免影响其他组件：

首先在组件类里设置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-upload',
  templateUrl: './your-upload.component.html',
  styleUrls: ['./your-upload.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourUploadComponent {
  // 组件逻辑
}

然后在CSS里给父容器加个类限定：

.upload-container .k-upload-files {
  display: none;
}

模板里给Kendo Upload套个容器：

<div class="upload-container">
  <kendo-upload [saveUrl]="你的上传接口地址"></kendo-upload>
</div>

这个方案要谨慎使用，因为关闭视图封装后组件的样式会变成全局的，容易和其他样式冲突。

内容的提问来源于stack exchange，提问作者Sam