组件
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
,该属性的内容是你要用的样式。文章来源:https://www.toymoban.com/news/detail-828950.html
@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模板网!