以下是一个简单的 Angular 组件的例子，包括组件的基本结构和属性：
// 导入必要的模块
import { Component } from '@angular/core';
// 定义组件元数据，包括选择器、模板和样式
@Component({
selector: 'app-sample',
template: `
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
`,
styles: [`
div {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
`]
})
// 定义组件类
export class SampleComponent {
// 定义组件属性
title: string = 'Angular 组件示例';
description: string = '这是一个简单的 Angular 组件';
}
在上面的例子中，@Component 装饰器用于定义组件的元数据，包括选择器（在 HTML 中使用的标签名）、模板（组件的视图）和样式。组件类 SampleComponent 包含了组件的逻辑和属性，如 title 和 description。
在实际应用中，你需要将组件添加到模块中，并在应用的主模块中引导它。这是一个简化的例子，实际应用可能涉及更多的模块和组件。
请注意，Angular 组件的详细使用方法可能涉及到更多的概念，如依赖注入、生命周期钩子等。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4908/Angular