ng-zorro-antd学习1

ng-zorro-antd项目使用Angular CLI构建，测试项目。所它的工程结构是

tslint

Angular是使用codelyzer扩展了tslint。可以对Angular项目进行更好的统一风格。如下，规定组件selector前缀。更多规则。

"directive-selector": [
  true,
  "attribute",
  "nz",
  ["camelCase","kebab-case"]

],
"component-selector": [
  true,
  [
    "element",
    "attribute"
  ],
  [
    "nz",
    "app"
  ],
  "kebab-case"
],

还有在指定文件头，一般注明所有权，以及作者。如下：

"file-header": [true, "Copyright Google Inc\\."],
/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 */

test

作为一个开源项目，测试是必须。Angular项目默认有两个测试，单元测试，端到端测试。

• 单元测试（unit tests）

使用jasmine+Karma ，命令ng test

• 端到端测试（end-to-end tests）

使用Protractor ，命令ng e2e。

exportAs

exportAs在模板中方便访问该指令或组件的实例。

import {Component,Directive} from 'angular2/core';

@Directive({
    selector:'[kittencup]',
    exportAs:'kp'
})
class Kittencup{
    url:string = 'http://kittencup.com'
}

@Component({
    selector: 'App',
    directives: [Kittencup],
    template: `
        <h1 kittencup #kpInstance="kp">
            <span (click)="clickHandle(kpInstance)">{{kpInstance.url}}</span>
        </h1>
    `
})
export class App {

    clickHandle(kpInstance:Kittencup){
        console.log(kpInstance);
    }
}

@Angular/cdk

ng-zorro-antd项目的覆盖，弹出之类组件是用的Angular Material 的overlay组件，这是Angular团队官方写的组件库，他们是使用@Angular/cdk 的portal解决弹出的问题。

现在body下建立一个弹出层的容器，使用DomPortalHost添加template或者Component。

全局CSS引入

ng-zorro-antd使用一个root组件。它是是一个空组件，只有css。然后设置组件css全局渲染，只需引入这个组件，就引入了全局CSS。这样解决了发布时还要发布CSS。