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 /挂载HomeHome当前只包含一个搜索表单尚无房产列表见 home.ts。本课要达成的目标创建一个名为HousingLocation的新组件并且让应用显示一条组件已成功加入应用的确认信息。完成后你的应用会多出一个可复用的组件它将在后续课程中逐步演化为展示房源数据的卡片。注意即使此刻生成了新组件页面渲染结果也应与上一课完全一致——因为新组件尚未被任何模板引用。第一步用 CLI 生成 HousingLocation 组件在 IDE 的Terminal面板中先进入你的项目目录即first-app目录然后执行ng generate component housingLocationng generate component可简写为ng g c是 Angular CLI 的核心脚手架命令。CLI 会根据组件名自动完成以下约定工作创建独立的housing-location目录并在其中生成组件逻辑文件与样式文件依据组件名自动推导selector为app-housing-locationapp-前缀是 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: phousing-location works!/p , styleUrls: [./housing-location.css], }) export class HousingLocation {}要点说明selector: app-housing-location决定了组件在模板中的标签名template字段当前仅包含一段占位文本housing-location works!用来验证组件已被正确生成和挂载styleUrls指向组件专属样式文件./housing-location.css组件的类名为HousingLocationCLI 依据参数housingLocation自动转成 UpperCamelCase。生成组件后继续在终端启动开发服务器ng serve注意ng serve这一步仅用于本地环境完成本课操作后请保持ng serve持续运行以便后续步骤实时看到改动效果。打开浏览器访问http://localhost:4200。此时应用应无报错地正常构建并且渲染效果与上一课完全相同——这是因为新组件虽然已生成但还没有被任何模板引用属于未接入状态。需要提醒的是ng serve通常带有热重载watch能力编辑文件保存后浏览器会即时刷新便于边改边验证。第二步把新组件接入 Home 布局要让HousingLocation真正出现在应用布局中需要把它挂到Home组件上。在 IDE 的Edit面板中打开 home.ts对应仓库中的04-interfaces版本依次完成三处修改。① 在文件顶层导入HousingLocationimport {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 typetext placeholderFilter by city / button classprimary typebuttonSearch/button /form /section section classresults 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.svgsection.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考