Angular6 是一个强大的前端框架，它在许多大型企业应用程序中得到了越来越广泛的应用。为了更好地了解这个框架，我开始阅读 Angular6 的官方文档，并在这里分享我的阅读笔记。
Angular6 中的组件
组件是 Angular6 的核心元素之一。每个 Angular6 应用都由一个或多个组件组成。组件是用 TypeScript 编写的，与 HTML 和 CSS（或 Sass、Less）配合使用。
创建组件的第一步是导入 Component 类。然后，我们可以通过定义一个 TypeScript 类来创建组件，并将其注解为 @Component。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------- -----------
------- -- -- ----- -------- --------
-
--
------ ----- ------------ --在上面的代码中，我们创建了一个叫做 AppComponent 的组件，并给它一个选择器为 app-root。我们还定义了一个模板，其中包含一个 <h1> 元素和一个 <p> 元素。
Angular6 中的模块
在 Angular6 中，模块被用来组织应用程序中的代码。每个 Angular6 应用都有一个根模块，它包含了其他所有模块。在创建一个新的 Angular6 应用时，我们需要在根模块中声明所有的组件和服务。
创建一个 Angular6 模块的第一步是导入 NgModule 类。我们还需要定义一个 TypeScript 类，并将其注解为 @NgModule。在这个注解中，我们可以列出该模块使用的组件和服务等。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- --------------
--
------ ----- --------- --在上面的代码中，我们创建了一个叫做 AppModule 的模块，并声明了一个叫做 AppComponent 的组件。我们还导入了 BrowserModule，它是 Angular6 应用中的根模块。最后，我们定义了 AppComponent 作为该应用的根组件。
Angular6 中的指令
指令是 Angular6 中的一种元素，它们被用来改变 HTML 元素的行为和样式。在 Angular6 中，有三种类型的指令：组件、结构型指令和属性型指令。
组件
前面已经介绍了组件，它是 Angular6 中的一种指令。组件通过定义一个 HTML 模板来渲染界面，并使用 TypeScript 来管理组件的属性和行为。
结构型指令
结构型指令是 Angular6 中的一种指令，它用于修改 HTML 布局。在 Angular6 中，有两种结构型指令：*ngIf 和 *ngFor。
*ngIf 指令根据条件从 DOM 中添加或移除元素。在下面的示例中，只有当 showElement 属性为 true 时才会显示 <p> 元素。
<p *ngIf="showElement">This element is only shown when showElement is true.</p>
*ngFor 指令用于循环显示一个数组中的元素。在下面的示例中，我们使用 *ngFor 显示了一个包含三个元素的字符串数组。
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>属性型指令
属性型指令是 Angular6 中的一种指令，它用于修改元素的属性。在 Angular6 中，有很多内置的属性型指令，例如 ngClass、ngStyle 和 ngModel。
ngClass 指令通过条件来添加或删除 CSS 类。在下面的示例中，当 isBig 属性为 true 时，big 类会被添加到 <p> 元素的类列表中。
<p [ngClass]="{'big': isBig}">This element has the big class when isBig is true.</p>ngStyle 指令用于动态设置样式。在下面的示例中，当 isBig 属性为 true 时，fontSize 样式会被设置为 30px。
<p [ngStyle]="{'font-size': isBig ? '30px' : '16px'}">This element has a big font size when isBig is true.</p>ngModel 指令用于双向数据绑定。在下面的示例中，我们使用 ngModel 实现了一个简单的输入框，当用户输入内容时，name 属性会自动更新。
<input [(ngModel)]="name" placeholder="Enter your name">
<p>Hello, {{ name }}!</p>结论
通过这篇文章，我们了解了 Angular6 中的一些核心概念，例如组件、模块和指令。通过这些知识，我们可以更好地构建 Angular6 应用程序，并将其用于实际项目中。
提示：要学习更多关于 Angular6 的知识，可以访问官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67037174d91dce0dc84b8416