写个过滤器 xxx.filter( 'to_trusted', ['$sce', function ($sce) { return function (text) { return $sce.trustAsHtml(text); } }] ) 使用 <div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted ">…

这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Portals可以翻译为 门户 ,我觉得放到这里叫 入口 更好,可以理解为动态创建组件的入口,类似于小程序或者Vue中的Slot. cdk全名Component Development Kit 组件开发包,是Angular官方在开发基于Material Design的组件库时抽象出来单独的一个开发包,里面…

在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售单据,会涉及到很多种费用,并且这些费用是由后台配置的,非常灵活.但是我们在制作打印模板时取值各项费用我们该如何去定义他呢,如何给他赋值呢?我们如果针对这一个场景下的模板进行一个特殊定义后,在打印另一份单据或者遇到同样的取值非常灵活的数据,是不是也需要进行特殊处理呢. 2.取值是通过自行定义进行取值的…

Angular 动态组件 实现步骤 Directive HostComponent 动态组件 AdService 配置AppModule 需要了解的概念 Directive 我们需要一个Directive来标记动态组件是在哪个容器组件内部进行渲染的. 这个Directive可以获取对容器组件的引用. 仅此而已. import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appAd]'…

问题比较特殊,google了好久才得到启示 开发的angular页面,需要嵌入到客户的web页中,以iframe方式.由于iframe的高度需要指定,而angular动态生成机制导致页面高度会随时变化, 就会出现2个滚动条,一个是页面本身,一个是iframe里的. 解决方法如下: 1.写一个directive监听angular的$digest,实时获取body高度,通过 HTML5 postMessage方式传出 在HTML5中新增了postMessage方法,postMessage可以实现跨文…

在前端开发过程中,可能会遇到列动态取值的情况,即列表中某列的取值由两个或以上的字段的值决定. 用 Vue 实现的话可以用如下代码解决 <template slot-scope="scope"> <div v-if="scope.row.phones && scope.row.phones.length"> <div v-for="v of scope.row.phones" :key="v&…

序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出几个 可以看出这几个页面都有一个共同点 都有图片 双列 列表单个模块的高度相同  我查看了下他们的源码 都是将图片设置为固定高度 然后将li撑开 li的宽度设置为50% 然后float:left 然后用…

在mybatis中通过使用SQL片段可以提高代码的重用性,如下情景: 1.创建动态SQL <sql id="sql_count">select count(*)</sql> 2.使用 <select id="selectListCountByParam" parameterType="map" resultType="String"> <include refid="sql_…

上一篇我们讲到angular对于timepicker的一个封装后的插件angular-bootstrap-timepicker,但是由于angular的版本必须是v1.2.30以上的.对于有些涉及到多插件的系统,升级会导致很多意外的bug.那么可以选择用以下这种方法来取值. 页面上的时间格式是这样的: 文件引入 '/bootstrap-datetimepicker.min.css', '/bootstrap-datetimepicker.min.js', '/bootstrap-datetime…

动态表单生成之拖拽生成表单(下) 我们的动态表单,最终要实现的效果与Form.io的在线生成表单的效果类似,可以参考它的demo地址:https://codepen.io/travist/full/xVyMjo 准备工作 首先,我们在过程中会需要用到一个弹出层控件,这里引用KendoUI的Dialogs,使用下面的命令安装: npm i --save @progress/kendo-angular-dialog 安装完成后,会提示几个可选依赖没有安装,我们继续使用命令完成安装: npm i --…