创新互联Angular教程：Angular组件-概览

Angular Components 概述

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、雅安服务器托管、营销软件、网站建设、龙胜网站维护、网站推广。

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

本主题描述如何创建和配置 Angular 组件。

要查看或下载本主题中使用的范例代码，请参阅现场演练 / 下载范例。

先决条件

要创建一个组件，请先验证你是否满足以下先决条件：

安装 Angular CLI。
创建一个带有初始项目的 Angular 工作区。如果还没有项目，你可以用 ng new 创建一个，其中是你的 Angular 应用的名字。

创建一个组件

Angular CLI 是用来创建组件的最简途径。你也可以手动创建一个组件。

使用 Angular CLI 创建组件

使用 Angular CLI 创建一个组件：

在终端窗口中，导航到要放置你应用的目录。
运行 ng generate component 命令，其中是新组件的名字。

默认情况下，该命令会创建以下内容：

一个以该组件命名的文件夹
一个组件文件 .component.ts
一个模板文件 .component.html
一个 CSS 文件， .component.css
测试文件 .component.spec.ts

其中是组件的名称。

你可以更改 ng generate component 创建新组件的方式。

手动创建组件

虽然 Angular CLI 是创建 Angular 组件的最佳途径，但你也可以手动创建一个组件。本节将介绍如何在现有的 Angular 项目中创建核心组件文件。

要手动创建一个新组件：

导航到你的 Angular 项目目录。
创建一个新文件 .component.ts 。
在文件的顶部，添加下面的 import 语句。

import { Component } from '@angular/core';

在 import 语句之后，添加一个 @Component 装饰器。

@Component({
})

为组件选择一个 CSS 选择器。

@Component({
  selector: 'app-component-overview',
})

定义组件用以显示信息的 HTML 模板。在大多数情况下，这个模板是一个单独的 HTML 文件。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

为组件的模板选择样式。在大多数情况下，你可以在单独的文件中定义组件模板的样式。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

添加一个包含该组件代码 class 语句。

export class ComponentOverviewComponent {

}

指定组件的 CSS 选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里。例如，考虑一个组件 hello-world.component.ts ，它的选择器定义为 app-hello-world 。当出现在模板中时，这个选择器就会让 Angular 实例化该组件。

在 @Component 装饰器中添加一个 selector 语句来指定组件的选择器。

@Component({
  selector: 'app-component-overview',
})

定义一个组件的模板

模板是一段 HTML，它告诉 Angular 如何在应用中渲染组件。可以通过以下两种方式之一为组件定义模板：引用外部文件，或直接写在组件内部。

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

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

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

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

如果你想让模板跨越多行，可以使用反引号（ ` ）。例如：

@Component({
  selector: 'app-component-overview',
  template: `
    Hello World!
    This template definition spans multiple lines.
  `
})

Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。

声明组件的样式

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

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

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

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

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

styles 属性接受一个包含 CSS 规则的字符串数组。

新闻名称：创新互联Angular教程：Angular组件-概览
网站网址：http://www.csdahua.cn/qtweb/news12/514712.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容