MMMMQI的博客

简单分析折叠面板由头部和内容组成，点击头部的时候，内容有一个展开和收缩的效果，如下图实现过程collapse.component.html没什么说的直接上代码。结构很简单，分成头部和面板内容两个部分，使用<ng-content>把面板内容投射到组件内部，expanded变量控制组件的展开/收缩状态。点击头部的时候切换expanded的值，显示不同的箭头图标，切换class<div class="collapse-wrapper" [class.collapsed]="!ex

管道管道可以理解成angular.js 1.x里的filter，用法也很类似都是通过|代码import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'formatSecond'})export class FormatSecondPipe implements PipeTransform { transform(value: number): string { const h = Math.floor(

绑定html片段，可以使用<div [innerHTML]="htmlCode"></div>但是由于安全策略，行内样式会被过滤掉，需要使用DomSanitizer转化。this.htmlCode = this.sanitizer.bypassSecurityTrustHtml(this.source);除了行内样式，我还写了一些针对这段html的样式在当前组件的scss文件里，结果并没有生效，检查后发现，是因为angular给样式加了属性选择器，比如.info[_ngco