Angular6笔记（3）

1.

你必须在一个NgModule类声明每一个组件。 否则当你使用这些组件时就会在浏览器的控制台中看到一个明显的错误信息。组件、指令和管道 — 属于declarations数组。 不要将其他类型的类添加到declarations中，例如NgModule类, 服务类，模型类。

2.

通过引导根AppModule来启动应用。 在启动过程中，其中一步是创建列在bootstrap数组的组件， 并将它们每一个都插入到浏览器的DOM中。

每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。

3.

模块的imports数组是@NgModule元数据中独有的。它告诉 Angular 特定 Angular 模块的信息 — 用@NgModule装饰的类 — 应用需要它们来正常工作。

4.ionic开发app:

1) ionContent指令提供一个易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。

2) ion-refresher 允许你下拉刷新滚动视图，把它作为ionContent 或 ionScroll元素的第一个子元素。

<ion-content ng-controller="MyController">

    <ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()">

    </ion-refresher>

       <ion-list>

           <ion-item ng-repeat="item in items"></ion-item>

       </ion-list>

</ion-content>

方法：

angular.module('testApp', ['ionic'])

.controller('MyController', function($scope, $http) {

    $scope.items = [1,2,3];

    $scope.doRefresh = function() {

        $http.get('/new-items')

        .success(function(newItems) {

               $scope.items = newItems; })

              .finally(function() { // 停止广播ion-refresher

                     $scope.$broadcast('scroll.refreshComplete');

                });

   };

});

其中，on-refresh是当用户下拉到一定程度然后开始刷新时触发。相似的还有on-pull当用户开始下拉刷新时触发，pulling-icon是用户下拉时显示的图标，默认是'ion-arrow-down-c',pulling-text是用户下拉时显示的文字，refreshing-icon 是刷新后显示的图标，refreshing-text是刷新后显示的文字。

3) ion-pane是一个简单的适应内容的容器。

4）ion-scoll是一个包含所有内容的可滚动的容器，包含的属性：

 

5.列表上的日期字段格式转化：

  /* 日期格式转化 */
  transCreatedDate(date) {
    return this.formatDate(new Date(date));
  }

  formatDate(date) {
    const y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let minute = date.getMinutes();
    minute = minute < 10 ? ('0' + minute) : minute;
    let second = date.getSeconds();
    second = second < 10 ? ('0' + second) : second;
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
  }

在页面上字段显示中调用这个方法：

<td class="overFont"><span title="{{data.createdDate}}">{{transCreatedDate(data?.createdDate)}}</span></td>
<td class="overFont"><span title="{{data.updatedDate}}">{{transCreatedDate(data?.updatedDate)}}</span></td>

或者更简单的方法——直接在字段上调用日期转换的管道：

<td class="overFont"><span title="{{data.createdDate | date : 'yyyy-MM-dd HH:mm:ss'}}">{{data?.createdDate | date : 'yyyy-MM-dd HH:mm:ss'}}</span></td>
<td class="overFont"><span title="{{data.updatedDate | date : 'yyyy-MM-dd HH:mm:ss'}}">{{data?.updatedDate | date : 'yyyy-MM-dd HH:mm:ss'}}</span></td>