import { Component , Input , Output , EventEmitter } from '@angular/core' ; import { NoticeItem } from './notice-item' ; @ Component ( { selector : 'notice-list' , template : `
    <div *ngIf="data.list?.length === 0; else listTpl" class="not-found">
        <img *ngIf="data.emptyImage" src="{{data.emptyImage}}" alt="not found" />
        <p>{{data.emptyText}}</p>
    </div>
    <ng-template #listTpl>
        <nz-list [nzDataSource]="data.list">
            <ng-template #item let-item>
                <nz-list-item (click)="onSelect(item)">
                    <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription" [nzAvatar]="item.avatar">
                        <ng-template #nzTitle>
                            {{item.title}}
                            <div class="extra" *ngIf="item.extra"><nz-tag [nzColor]="item.color">{{item.extra}}</nz-tag></div>
                        </ng-template>
                        <ng-template #nzDescription>
                            <div *ngIf="item.description" class="description">{{item.description}}</div>
                            <div *ngIf="item.datetime" class="datetime">{{item.datetime}}</div>
                        </ng-template>
                    </nz-list-item-meta>
                </nz-list-item>
            </ng-template>
        </nz-list>
        <div class="clear" (click)="onClear()">清空{{data.title}}</div>
    </ng-template>
    ` } ) export class NoticeListComponent { @ Input ( ) data : NoticeItem ; @ Output ( ) select = new EventEmitter < any > ( ) ; @ Output ( ) clear = new EventEmitter < string > ( ) ; onSelect ( item ) { this . select . emit ( { title : this . data . title , item : item } ) ; } onClear ( ) { this . clear . emit ( this . data . title ) ; } }