fix(module: accordion): fix accordion support template and add suppor…

…t innerHtml (#307)

components/accordion/accordion-group/accordion-group.component.html

@@ -5,13 +5,14 @@
      (click)="checkAndToggle()"
 >
   <i class="arrow"></i>
-  {{header}}
+  <div *ngIf="!isTemplateRef(header)" [innerHTML]="header | safeHTML"></div>
+  <ng-template *ngIf="isTemplateRef(header)" [ngTemplateOutlet]="header"></ng-template>
 </div>
 <div role="tabpanel"
      class="am-accordion-content"
      [ngClass]="{'am-accordion-content-active':isOpened}"
      [@slide]="slide"
-     (@slide.done)="slideAnimationDoen($event)" 
+     (@slide.done)="slideAnimationDoen($event)"
 >
   <div *ngIf="isShowChild" class="am-accordion-content-box">
     <ng-content></ng-content>

components/accordion/accordion-group/accordion-group.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AccordionService } from '../accordion.service';
 import { AccordionGroupComponent } from './accordion-group.component';
+import { NgZorroAntdMobilePipesModule } from '../../pipes/ng-zorro-antd-mobile.pipes.module';
 
 describe('AccordionGroupComponent', () => {
   let component: AccordionGroupComponent;
@@ -10,7 +11,7 @@ describe('AccordionGroupComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [AccordionGroupComponent],
-      imports: [BrowserAnimationsModule],
+      imports: [BrowserAnimationsModule, NgZorroAntdMobilePipesModule],
       providers: [AccordionService]
     }).compileComponents();
   }));

components/accordion/accordion-group/accordion-group.component.ts

@@ -1,7 +1,8 @@
 import { Component, Input, ChangeDetectorRef, Output, EventEmitter, ViewEncapsulation, HostBinding } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { AccordionService } from '../accordion.service';
-
+import { isTemplateRef } from '../../core/util/check';
+import { Template } from '@angular/compiler/src/render3/r3_ast';
 @Component({
   selector: 'AccordionPanel',
   templateUrl: './accordion-group.component.html',
@@ -28,7 +29,7 @@ export class AccordionGroupComponent {
   @Input()
   key: string;
   @Input()
-  header: string;
+  header: string | Template;
   @Input()
   isOpened: boolean = false;
   @Input()
@@ -39,6 +40,7 @@ export class AccordionGroupComponent {
   onClose = new EventEmitter();
   @Output()
   onChange = new EventEmitter();
+  isTemplateRef = isTemplateRef;
 
   @HostBinding('class.am-accordion-item') public amItem = true;
   @HostBinding('class.am-accordion-item-active') public isActive = this.isOpened;

components/accordion/accordion.module.ts

@@ -3,9 +3,10 @@ import { CommonModule } from '@angular/common';
 import { AccordionComponent } from './accordion.component';
 import { AccordionGroupComponent } from './accordion-group/accordion-group.component';
 import { WhiteSpaceModule } from '../white-space/white-space.module';
+import { NgZorroAntdMobilePipesModule } from '../pipes/ng-zorro-antd-mobile.pipes.module';
 
 @NgModule({
-  imports: [CommonModule, WhiteSpaceModule],
+  imports: [CommonModule, WhiteSpaceModule, NgZorroAntdMobilePipesModule],
   declarations: [AccordionComponent, AccordionGroupComponent],
   exports: [AccordionComponent, AccordionGroupComponent]
 })

components/accordion/demo/basic.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, AfterViewInit, OnInit } from '@angular/core';
 
 @Component({
   selector: 'demo-accordion-basic',
@@ -19,18 +19,27 @@ import { Component } from '@angular/core';
         </List>
       </AccordionPanel>
     </Accordion>
+    <ng-template #title1>
+      <div>Title 1</div>
+    </ng-template>
   `
 })
-export class DemoAccordionBasicComponent {
-  accordions: Array<any> = [
-    { title: 'Title 1', child: ['content 1', 'content 1', 'content 1'] },
-    { title: 'Title 2', child: ['content 2', 'content 2', 'content 2'], inactive: false },
-    { title: 'Title 3', child: ['content 3', 'content 3', 'content 3'], inactive: true }
-  ];
+export class DemoAccordionBasicComponent implements OnInit {
+  @ViewChild('title1') title1: ViewChild;
+  accordions: Array<any> = [];
 
   activeKey = [0, 1];
 
   onChange(event) {
     console.log(event);
   }
+
+  ngOnInit() {
+    this.accordions = [
+      { title: this.title1, child: ['content 1', 'content 1', 'content 1'] },
+      { title: `<img src="/assets/icons/icon-72x72.png" style="width:36px"/>`, child: ['content 2', 'content 2', 'content 2'], inactive: false },
+      { title: 'Title 3', child: ['content 3', 'content 3', 'content 3'], inactive: true }
+    ];
+  }
+
 }

components/accordion/doc/index.en-US.md

@@ -27,6 +27,6 @@ Properties | Descrition | Type | Default
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | key  | corresponding activeKey   | String   | -   |
-| header | header content of Panel | TemplateRef or String | -   |
+| header | header content of Panel | TemplateRef or String or html(<div>header</div>) | -   |
 
 Note: Currently does not support nested use for NG.

components/accordion/doc/index.zh-CN.md

@@ -28,6 +28,6 @@ subtitle: 手风琴
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
 | key  | 对应 activeKey   | String          | 无     |
-| header | 面板头内容 | TemplateRef or String | 无     |
+| header | 面板头内容 | TemplateRef or String or html(<div>header</div>) | 无     |
 
 注意: 目前暂不支持嵌套使用