企业官网建设流程全解析

Angular 教程第三课：创建 HousingLocation 组件并接入应用布局

【免费下载链接】angularDeliver web apps with confidence 🚀项目地址: https://gitcode.com/GitHub_Trending/an/angular

本文是 Angular 官方入门教程《Build your first Angular app》（对应仓库目录adev/src/content/tutorials/first-app）第三课的中文技术指南，核心内容是：如何在现有Home页基础上，通过 Angular CLI 生成新的独立组件HousingLocation，再把它导入Home组件的imports数组并写入模板<app-housing-location>，最后补充预置样式使页面正确渲染。完成本课后，你将掌握 Angular 组件从"生成、注册到被父组件使用"的完整链路，并能理解独立（standalone）组件与@Component元数据各字段的作用。

课程目标与本课的起点

本课位于教程的第 03 步03-HousingLocation，前一课（02-Home）已完成Home组件与搜索表单布局，其状态如下：

• 入口 main.ts 使用bootstrapApplication(App)进行独立组件引导；
• 根组件App（见 app.ts）以<app-home />挂载Home；
• Home当前只包含一个搜索表单，尚无房产列表（见 home.ts）。

本课要达成的目标：创建一个名为HousingLocation的新组件，并且让应用显示一条"组件已成功加入应用"的确认信息。完成后，你的应用会多出一个可复用的组件，它将在后续课程中逐步演化为展示房源数据的卡片。注意：即使此刻生成了新组件，页面渲染结果也应与上一课完全一致——因为新组件尚未被任何模板引用。

第一步：用 CLI 生成 HousingLocation 组件

在 IDE 的Terminal面板中，先进入你的项目目录（即first-app目录），然后执行：

ng generate component housingLocation

ng generate component（可简写为ng g c）是 Angular CLI 的核心脚手架命令。CLI 会根据组件名自动完成以下约定工作：

• 创建独立的housing-location目录，并在其中生成组件逻辑文件与样式文件；
• 依据组件名自动推导selector为app-housing-location（app-前缀是 CLI 的默认约定，避免与原生 HTML 元素冲突）；
• 生成可被直接独立使用的standalone 组件（Angular 高版本默认行为），无需依赖NgModule声明。

从本课"参考答案"目录04-interfaces中的最终文件，可以看到本组件期望的最终形态：

// src/app/housing-location/housing-location.ts import {Component} from '@angular/core'; @Component({ selector: 'app-housing-location', template: ` <p>housing-location works!</p> `, styleUrls: ['./housing-location.css'], }) export class HousingLocation {}

要点说明：

• selector: 'app-housing-location'决定了组件在模板中的标签名；
• template字段当前仅包含一段占位文本housing-location works!，用来验证组件已被正确生成和挂载；
• styleUrls指向组件专属样式文件./housing-location.css；
• 组件的类名为HousingLocation（CLI 依据参数housingLocation自动转成 UpperCamelCase）。

生成组件后，继续在终端启动开发服务器：

ng serve

注意：ng serve这一步仅用于本地环境！完成本课操作后请保持ng serve持续运行，以便后续步骤实时看到改动效果。

打开浏览器访问http://localhost:4200。此时应用应无报错地正常构建，并且渲染效果与上一课完全相同——这是因为新组件虽然已生成，但还没有被任何模板引用，属于"未接入"状态。需要提醒的是，ng serve通常带有热重载（watch）能力，编辑文件保存后浏览器会即时刷新，便于边改边验证。

第二步：把新组件接入 Home 布局

要让HousingLocation真正出现在应用布局中，需要把它"挂"到Home组件上。在 IDE 的Edit面板中打开 home.ts（对应仓库中的04-interfaces版本），依次完成三处修改。

① 在文件顶层导入HousingLocation：

import {Component} from '@angular/core'; import {HousingLocation} from '../housing-location/housing-location';

② 把HousingLocation加入@Component元数据的imports数组：

@Component({ selector: 'app-home', imports: [HousingLocation], // ... })

这里需要特别理解imports数组的语义：对于 standalone 组件，imports相当于显式声明"本组件的模板中会用到哪些其它组件/指令/管道"。只有被加入imports的组件，才能在其模板里通过标签被识别，这正是新版 Angular 摆脱NgModule集中声明的核心用法——依赖关系直接落在使用方组件上。

③ 在template模板中加入<app-housing-location>标签引用：

最终home.ts完整代码如下：

import {Component} from '@angular/core'; import {HousingLocation} from '../housing-location/housing-location'; @Component({ selector: 'app-home', imports: [HousingLocation], template: ` <section> <form> <input type="text" placeholder="Filter by city" /> <button class="primary" type="button">Search</button> </form> </section> <section class="results"> <app-housing-location /> </section> `, styleUrls: ['./home.css'], }) export class Home {}

改动之后，<app-housing-location />被放置在带resultsclass 的<section>容器中——这个容器在后续课程里会成为房源卡片列表的网格布局区域（home.css 中已用 CSS Grid 为.results定义了自适应多列网格）。

第三步：为组件补充预置样式

为了让组件后续渲染出完整的房源卡片样式，本课需要把预先写好的样式复制进组件样式文件。打开src/app/housing-location/housing-location.css，将以下内容粘贴进去：

.listing { background: var(--accent-color); border-radius: 30px; padding-bottom: 30px; } .listing-heading { color: var(--primary-color); padding: 10px 20px 0 20px; } .listing-photo { height: 250px; width: 100%; object-fit: cover; border-radius: 30px 30px 0 0; } .listing-location { padding: 10px 20px 20px 20px; } .listing-location::before { content: url('/public/location-pin.svg') / ''; } section.listing a { padding-left: 20px; text-decoration: none; color: var(--primary-color); } section.listing a::after { content: '\203A'; margin-left: 5px; }

这段样式可以从本课的参考答案文件 housing-location.css 直接核对。它的设计意图如下：

• 使用全局 CSS 变量--accent-color、--primary-color（定义在应用级样式文件中）来保持主题一致；
• .listing-photo中的object-fit: cover用于让后续的房源照片裁切填满卡片头部；
• .listing-location::before通过 CSS 内容注入定位小图标/public/location-pin.svg；
• section.listing a::after中的'\203A'是右尖引号（›）的 Unicode 转义，作为链接的视觉箭头。

这些 class 名（listing、listing-heading、listing-photo、listing-location）当前尚未被模板使用——它们是为后续课程中HousingLocation组件填充真实房源模板时准备的。

提示：在浏览器版本的教程编辑器（embedded editor）中，如果无法创建独立 CSS 文件，也可以把样式直接放进src/app/housing-location/housing-location.ts的@Component元数据styles数组里，效果相同。

保存代码后回到浏览器确认应用能无报错构建，此时页面应渲染出文本housing-location works!。这说明组件已成功生成、导入并被模板正确渲染。

这张图即本课完成后的真实运行结果：页面顶部是品牌 logo，中间是筛选输入框与 Search 按钮，下方results区域内出现了由HousingLocation渲染出的确认文本。如遇报错，请对照上述三处改动逐一排查（导入语句、imports数组、模板标签三者缺一不可），修正后再进入下一课。

小结与仓库佐证

本课完成了三件事：通过ng generate component housingLocation生成新组件、将其imports到Home并以<app-housing-location />接入模板、最后补充组件专属样式。

在教程目录adev/src/content/tutorials/first-app/steps中，本课的产物与后续演进可见一斑：

• 03-HousingLocation/src/app/home/home.ts是本课起点状态（尚无HousingLocation的引用）；
• 04-interfaces/src/app/housing-location/housing-location.ts与本课期望的组件定义一致；
• 04-interfaces/src/app/housing-location/housing-location.css提供上文完整样式；
• 04-interfaces/src/app/home/home.ts给出本课结束后Home组件的完整形态。

从教程 config.json 也可看出其校验机制："answerSrc": "../04-interfaces/src"表明下一课04-interfaces的代码被用作本课的参考答案，编辑器会把学习者代码与04-interfaces逐行比对，从而判断"组件已正确生成并接入"这一课是否完成。

若想了解更底层的技术背景，可以继续在仓库中阅读：

• 组件引导流程：查看 main.ts 中的bootstrapApplication(App)，理解 standalone 应用如何无需NgModule直接启动；
• Angular 包版本基线：教程本地环境依赖参考 package.json（含@angular/cli、@angular/core等版本约定）；
• 下一课预告：04-interfaces将引入HousingLocation接口并用@Input为组件传入真实房源数据，本课创建的组件正是后续所有房源卡片逻辑的宿主。

通过本课，你不仅学会了一次组件生成与接入的操作，更理解了 standalone 组件模式下"组件复用、按需导入、就近声明样式"的现代 Angular 组织方式——这将是后续实现动态数据渲染、列表循环与服务注入的基础。

【免费下载链接】angularDeliver web apps with confidence 🚀项目地址: https://gitcode.com/GitHub_Trending/an/angular