Angualr2使用Cookie

Angualr2中提供了使用Cookie的官方库angular2-cookie。

1. 如何安装呢？

使用npm安装：
打开终端，cd到项目中，运行下面命令：

npm install angular2-cookie --save

安装完成后在systemjs.config.js文件中的map下最后一行添加如下代码：

'angular2-cookie':            'npm:angular2-cookie'

注：别忘了在上一行的末尾添加逗号“,”。
在packages的最后一行添加如下代码：

'angular2-cookie': {
    main: './core.js',
    defaultExtension: 'js'
}

注：同样的，别忘了在上一行的末尾添加逗号“,”。
如果你没有改动过官方的快速起步，那么现在你的systemjs.config.js文件看起来应该是这样婶儿的：

(function (global) {
    System.config({
        paths: {
            // paths serve as alias 
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things 
        map: {
            // our app is within the app folder 
            app: 'app',

            // angular bundles 
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries 
            'rxjs':                       'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'angular2-cookie':            'npm:angular2-cookie'
        },
        // packages tells the System loader how to load when no filename and/or no extension 
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'angular2-cookie': {
                main: './core.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

2. 如何使用呢？

首先引用Angular2-Cookie：

import { CookieService } from 'angular2-cookie/services/cookies.service';

将Angular2-Cookie服务注入：

constructor(private _cookieService:CookieService){}

便可以调用了。

3. 都有哪些方法呢？

get(key: string): string

通过一个String类型的key获取一个String类型的数据。

getObject(key: string): Object

通过一个String类型的key获取一个Object类型的数据。

getAll(): any

获取所有Cookie中保存的内容。

put(key: string, value: string, options?: CookieOptionsArgs): void

保存string类型的数据。

putObject(key: string, value: Object, options?: CookieOptionsArgs): void

保存Object类型的数据。

remove(key: string, options?: CookieOptionsArgs): void

删除指定的数据。

removeAll(): void

删除所有数据。

注：
CookieOptionsArgs：

• path - [string] - 保存路径，保存的数据只适用于输入路径及其子路径，路径是基于标签中的路径。
• domain - [string] - 保存域，保存的数据只适用于当前域及其子域，
• expires - [string|Data] - "Wdy, DD Mon YYYY HH:MM:SS GMT"样式的字符串或者Data类型，设置保存数据的到期日期。
• secure - [boolean] - 如果设置为true，数据只能通过安全连接获取。