AngularJS的ngCookies/$cookies在Angular 4/5中的替代方案是什么？

嘿，这个问题我刚好之前处理过！在Angular 4/5里，官方已经弃用了AngularJS那套ngCookies模块，取而代之的是用轻量第三方库ngx-cookie-service来实现相同的cookie读写功能，用法和你熟悉的$cookies非常接近，下面一步步给你还原你示例里的功能：

步骤1：安装依赖 #

首先得把这个cookie服务库装到项目里，打开终端在项目根目录执行：

# 注意：Angular 4/5需要指定兼容版本，比如2.1.0
npm install ngx-cookie-service@2.1.0 --save

步骤2：在模块中注册CookieService #

和AngularJS里注入模块类似，我们需要在你的根模块（比如AppModule）里导入并提供这个服务：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CookieService } from 'ngx-cookie-service'; // 导入Cookie服务

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CookieService], // 把服务加入提供者列表，让组件可以注入使用
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：在组件中注入并使用（对应你的AngularJS示例） #

Angular里的组件就相当于AngularJS的控制器，我们在这里注入CookieService，然后实现你原来的put和get操作：

import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'app-main',
  template: `<p>从Cookie读取的内容: {{ msgFromCookie }}</p>`
})
export class MainComponent {
  msgFromCookie: string;

  // 构造函数中注入CookieService，和AngularJS的$inject注入方式类似
  constructor(private cookieService: CookieService) {
    // 对应AngularJS里的 $cookies.put('msg', 'Hello World')
    this.cookieService.set('msg', 'Hello World');
    
    // 对应AngularJS里的 $scope.msgFromCookie = $cookies.get('msg')
    this.msgFromCookie = this.cookieService.get('msg');
  }
}

额外补充：更多常用操作 #

这个库的方法和AngularJS的$cookies几乎一致，满足日常需求：

• 检查cookie是否存在：this.cookieService.check('msg')（返回布尔值）
• 删除指定cookie：this.cookieService.delete('msg')
• 删除所有cookie：this.cookieService.deleteAll()
• 设置带参数的cookie（过期时间、路径、域名等）：

// 示例：设置有效期30天，路径为根目录的cookie
this.cookieService.set('msg', 'Hello World', 30, '/');

如果你不想依赖第三方库，也可以直接用原生JS的document.cookie来操作，但第三方库帮你处理了浏览器兼容、参数格式化等细节，用起来更省心。

内容的提问来源于stack exchange，提问作者Roy Ryando