2.Angular组件概述

这篇具有很好参考价值的文章主要介绍了2.Angular组件概述。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

组件

Angular 组件概述

组件是 Angular 应用的主要构造块。每个组件包括如下部分:

  • 一个 HTML 模板,用于声明页面要渲染的内容
  • 一个用于定义行为的 TypeScript 类
  • 一个 CSS 选择器,用于定义组件在模板中的使用方式
  • 要应用在模板上的 CSS 样式(可选)

创建组件

Angular CLI 是创建组件的最简单的途径,我们也可以手动创建一个组件。

1. 使用 Angular CLI 创建组件
1.1. 在终端窗口中,导航到要放置你应用的目录。
1.2. 运行 ng generate component <component-name> 命令,其中 <component-name> 是新组件的名称。

默认情况下,该命令会创建以下内容:

  • 一个以该组件命名的文件夹
  • 一个组件文件:<component-name>.component.ts
  • 一个模板文件:<component-name>.component.html
  • 一个 CSS 文件:<component-name>.component.css
  • 一个测试文件:<component-name>.component.spec.ts

详细参考:https://angular.cn/cli/generate#component-command

2. 手动创建组件
2.1. 导航到你的 Angular 项目目录。
2.2 创建一个新文件 <component-name>.component.ts
2.3. 在文件的顶部,添加下面的 import 语句。
import { Component } from '@angular/core';
2.4. 在 import 语句之后,添加一个 @Component 装饰器。
@Component({
})
2.5. 指定组件的 CSS 选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular:当在模板 HTML 中找到相应的标签时,就把该组件实例化在那里。比如,考虑一个组件 hello-world.component.ts,它的选择器定义为 app-hello-world。当 <app-hello-world> 出现在模板中时,这个选择器就会让 Angular 实例化该组件。我们可以在 @Component 装饰器中添加一个 selector 语句来指定组件的选择器。

@Component({
  selector: 'app-component-overview',
})
2.6. 定义组件的 HTML 模板

在大多数情况下,这个模板是一个单独的 HTML 文件,用于显示信息。它告诉 Angular 如何在应用中渲染组件。可以通过以下两种方式为组件定义模板:引用外部文件,或直接写在组件内部。

2.6.1 引用外部文件

要把模板定义为外部文件,就要把 templateUrl 添加到 @Component 装饰器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})
2.6.2 直接写在组件内部

要在组件中定义模板,就要把一个 template 属性添加到 @Component 中,该属性的内容是要使用的 HTML。

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
})

如果你想让模板跨越多行,可以使用反引号(`)。比如:

@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
})
2.7. 声明组件的样式

有两种方式可以为组件的模板声明样式:引用一个外部文件,或直接写在组件内部。

2.7.1 引用外部文件

要在单独的文件中声明组件的样式,就要把 styleUrls 属性添加到 @Component 装饰器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
2.7.2 直接写在组件内部

要想在组件内部声明样式,就要把 styles 属性添加到 @Component,该属性的内容是你要用的样式。

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

styles 属性接受一个包含 CSS 规则的字符串数组。文章来源地址https://www.toymoban.com/news/detail-828950.html

8. 添加一个包含该组件代码的 class 语句。
export class ComponentOverviewComponent {
}

到了这里,关于2.Angular组件概述的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Angular-03:组件模板

    各种学习后的知识点整理归纳,非原创! 将组件类中的数据显示在组件模板中,组件类数据发生变化时会自动同步到组件模板中。(数据驱动DOM) 语法:{{}},插值表达式。 DOM对象属性 语法:[属性名] // 属性名加中括号[] HTML标签属性 [attr.属性名] // attr.属性名加中括号[] 自

    2024年02月07日
    浏览(36)
  • angular实现全局组件

    之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在declares:[component],然后exports出该组件。最后在页面中每次导入该组件,而这次我们将采用另一种方式来实现 1 新建公用组件: 2 新建一个share.module.ts,在该module中引入我们所有的公共组件,本例中只有一个

    2024年02月12日
    浏览(44)
  • Angular组件通信

    给子组件标签自定义一个属性 子组件引入 Input 模块 父组件: 子组件: Angular的Output属性是用于子组件向父组件传递信息的一种方式。通过在子组件中定义一个Output属性,子组件可以通过EventEmitter触发这个属性,父组件可以通过@Output的形式监听子组件的属性,并在属性被触发

    2024年02月05日
    浏览(40)
  • Angular系列教程之组件

    在Angular中,组件是构建Web应用程序的核心单元。它们允许我们将UI划分为独立且可重用的部分,并通过数据绑定和事件处理等机制来实现交互性。本文将介绍Angular组件的基本概念,并说明组件和指令的关系。 组件是一个由HTML模板、样式和逻辑代码组成的独立单元。它可以看

    2024年01月17日
    浏览(38)
  • Angular组件生命周期详解

    当 Angular 实例化组件类 并渲染组件视图及其子视图时,组件实例的生命周期就开始了。生命周期一直伴随着变更检测,Angular 会检查数据绑定属性何时发生变化,并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时,生命周期就结束了。当 Ang

    2024年02月05日
    浏览(45)
  • Angular中的组件

    组件简介 Angular中的组件,是一个使用 @component()装饰器 装饰的特殊类,同时在这个装饰器中指定 元数据 ,元数据包括 组件选择器 、 组件模板 、 组件样式 等。 组件是angular模块化的一个基本的组成元素。日常开发中,页面通常就是由一个或者多个组件堆叠而成。 组件的元

    2023年04月08日
    浏览(32)
  • Angular单元测试组件

    文章目录 前言 一、 单元测试是什么? 二、配置jasmine karma 三、技术点 1. 变更监测detectChanges 2. 模拟异步fakeAsync 3. Spy 四、单元测试基础结构 1. describe 2. beforeEachafterEach 3. it 4. expect 4.1 断言方法 5. configureTestingModule 6. compileComponents 7. createComponent 8. ComponentFixture 8.1 创建固件

    2024年02月13日
    浏览(34)
  • Angular独立组件简单体验

    Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。 在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,但是值得注意的是Angular独立组件的API仍然没有稳定下,将来可能存在一些破坏性更新,所以不推荐在生产环境中使用。 对于已有的组件,我们可以在 @

    2024年01月20日
    浏览(37)
  • Angular 独立组件入门

    如果你正在学习 Angular,那么你可能已经听说过独立组件(Component)。顾名思义,独立组件就是可以独立使用和管理的组件,它们能够被包含在其他组件中或被其他组件引用。 在本文中,我们将学习如何创建简单的独立组件以及如何在 Angular 应用程序中使用它们。 创建组件

    2024年02月13日
    浏览(32)
  • Angular 怎么封装基础组件?

    在Angular中,封装基础组件通常是通过创建自定义Angular组件来实现的。这些自定义组件可以包含通用的功能和样式,然后可以在应用中多次重复使用。以下是一个简单的示例,说明如何封装一个基础组件。 假设我们要创建一个通用的警告框组件,它可以在应用中的不同部分显

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包