介绍
@angular/core 是 Angular 的核心模块，提供了 Angular 应用程序所需的基本功能。在本篇文章中，我们将详细讲解如何使用 @angular/core 这个 npm 包。
安装
要使用 @angular/core，首先需要安装它。
可以使用以下命令在项目中安装 @angular/core：
npm install @angular/core
使用
安装完毕之后，我们可以在项目中引入 @angular/core：
import { Component } from '@angular/core';然后就可以使用 @angular/core 提供的功能了。
核心功能
@angular/core 提供的核心功能包括：组件、指令、服务和管道。下面我们将分别介绍每个功能的用法。
组件
组件是 Angular 应用程序中的一个基本构建块。组件通常由 HTML 模板和相关的 TypeScript 代码组成。使用 @Component 装饰器可以轻松创建组件。例如：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<h1>Hello, World!</h1>',
})
export class AppComponent {}在上面的示例中，我们创建了一个名为 AppComponent 的组件，它的模板只包含一个 <h1> 标签。
指令
指令是一种可以被添加到 HTML 元素上的东西，它能够修改元素的外观或行为。有两种类型的指令：结构型指令和属性型指令。
结构型指令基于 DOM 结构来显示或隐藏元素，最常用的两个结构型指令是 ngIf 和 ngFor。例如：
<div *ngIf="isShow">
<p>这个元素只有在 isShow 为 true 时才会显示</p>
</div>
<ul>
<li *ngFor="let item of list">{{ item }}</li>
</ul>属性型指令用于按照需要修改元素的属性或行为。例如，ngClass 指令可以根据条件为元素添加或删除 CSS 类。例如：
<div [ngClass]="{'active': isActive}"></div>在上面的示例中，如果 isActive 为 true，那么元素就会添加一个名为 active 的 CSS 类。
服务
服务是一种可以在应用程序中共享的对象。它们有助于在应用程序中管理数据和逻辑，并可用于实现跨组件通信。
Angular 的 DI（依赖注入）系统是管理服务的一种常用方法。要使用服务，首先需要将服务添加到应用程序的 providers 列表中，然后在组件中注入它。
以下是一个简单的服务示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- ----------- -
------- ----- - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
--
---------- -
------ -----------
-
------------- -
----------------------
-
-在上面的示例中，我们创建了一个名为 UserService 的服务，它具有 getUsers 和 addUser 方法。我们还在 @Injectable 装饰器中将服务提供给了根模块。
要在组件中使用该服务，可以通过构造函数将其注入：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- --------- --------- -- --- -------- --------
-----
-----
------ -------------------------- -------------------
------ ------------------------- ------------------
------- ----------------------- -------------
------
--
--
------ ----- ------------ -
----- - ---
------- - - ----- --- ---- ---- --
------------------- ------------ ------------ -
---------- - ----------------------------
-
--------- -
---------------------------------------
------------ - - ----- --- ---- ---- --
-
-在上面的示例中，我们将 UserService 注入了 AppComponent 中，并调用了它的 getUsers 和 addUser 方法。
管道
管道用于把数据转换为所需的格式。Angular 内置了很多常用的管道，例如 DatePipe、UpperCasePipe、LowerCasePipe 等。
以下是一个简单的管道示例：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}在上面的示例中，我们创建了一个名为 ReversePipe 的管道，它将字符串反转并返回。
要在模板中使用该管道，可以像下面这样：
<p>{{ 'Hello, World!' | reverse }}</p>就会输出：!dlroW ,olleH。
结论
在本篇文章中，我们详细讲解了如何使用 @angular/core 这个 npm 包。通过掌握 @angular/core 提供的核心功能，我们可以更加高效地开发 Angular 应用程序。希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108025