angular2抽取公共复用组件（模块间公用）

最新推荐文章于 2025-06-18 13:26:53 发布

原创

最新推荐文章于 2025-06-18 13:26:53 发布 · 5.9k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何在Angular2中抽取出公共组件，如footer，详细讲解了从生成组件到创建模块文件的过程，并提供了具体的代码示例。通过模块文件引入，其他模块可以方便地复用这些公共组件。

angular2抽取公共复用组件（模块间公用）

例如创建footer组件
- ng g c footer –module
- footer.component.spec.ts (测试文件)
- *footer.component.ts （ts组件文件）

-footer.module.ts (模块文件)

这里写图片描述

具体代码

footer.component.ts

代码块

import { Router } from '@angular/router';
@Component({
selector: 'app-footer',
template: `
<div class="row login_footer">
<ul

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lorena0928

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Angular.js 在前端开发中的代码复用策略

小白菜的博客

05-28

943

本文旨在帮助 Angular.js 开发者掌握代码复用的核心方法，覆盖指令、服务、组件三大复用工具，结合实际开发场景，讲解如何设计可复用的代码模块，并解决复用过程中常见的痛点（如作用域隔离、依赖管理）。本文将按照“概念讲解→原理分析→实战案例→场景总结”的逻辑展开：首先用“造房子”的故事引出复用概念，然后拆解指令、服务、组件的核心作用；接着通过代码示例演示如何实现复用；最后总结常见场景和未来优化方向。指令（Directives）

Angular 单元测试-提取公共方法

Discowei的博客

03-17

428

Angular 单元测试-提取公共方法可以重用的测试代码可以提取到单独的文件。创建一个common.spec.ts( 名字随便起 ) 写入公共代码到common.spec.ts 并export import { HttpService } from '../services/http/http.service'; function prepareAll() { const filePath = 'assets/UTData/http-get-test.json'; // 真实数据存在

参与评论您还未登录，请先登录后发表或查看评论

Angularjs 创建可复用组件实例代码

11-29

AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码，创建可测试组件，然后将它们变成可重用组件。 Directive是一组独立的JavaScript、HTML和CSS，它们封装了一个特定的行为，它将成为将来创建的Web组件的组成部分，我们可以在各种应用中重用这些组件。在创建之后，我们可以直接通过一个HTML标签、自定义属性或CSS类、甚至可以是HTML注释，来执行一个Directive。这一篇教程将介绍如何创建一个‘自定义步长选择’ Directive，它可以作为一个可重用输入组件。本文不仅会介绍Directive的一般创建过程，还会介绍

vue angular 组件复用性

Future1994的博客

04-15

532

vue中获取dom的话，使用ref和document.getElementById都可以但是考虑复用性和vue标准建议使用ref方式因为id不能两个设置一样的。 angular 获取dom 官方建议采用 ViewChild 可以复用 ...

【Angular13】进阶教程-复用组件创建与使用

学无止境

08-27

863

【Angular13】进阶教程-复用组件创建与使用

2022年前端工程师刘佳伟项目优化与组件封装经验分享

2. Angular列表查询组件封装与数据驱动表单实现：在另一个项目中，刘佳伟因为车务系统框架版本较低，缺乏内置的查询组件，所以他为列表查询功能设计了一个自定义组件。这个组件解决了页面模板的代码冗余问题，提升了...

精选资源

项目优化总结，经验积累

03-14

"项目优化总结，经验积累" 该资源摘要信息是关于...该资源摘要信息涵盖了项目优化总结和经验积累的多个方面，包括个人介绍、工作回顾、列表通用逻辑抽取、公用逻辑封装复用、框架优化和Angular 列表查询组件封装等。

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

构建angular组件库_使用Angular元素构建可重用组件

culiu9261的博客

07-21

792

构建angular组件库Code reuse can be significant in any software project. By reusing code, developers can drastically cut development and maintenance time for software projects. This is the reason that every...

angular组件

09-06

angular新建组件及组件复用，模板语法，ng g c helloworld! 双向数据绑定，angular注解，使用terminal命令启动项目

Angular7多标签页实现(路由复用+路由懒加载)完美解决方案

04-08

Angular7多标签页实现(路由复用+路由懒加载)完美解决方案

angular框架中提取公共服务及公用方法的实现

qq_35703552的博客

03-03

970

公共服务的提取 ListServiceInit 服务类：可以通过Injector来检索出全局注册的服务 import { ChangeDetectorRef, Injector } from "@angular/core"; import { LoggerFactory } from "app/core/logger-factory.service"; import { Logger } from "app/core/logger.service"; import { BsModalService }

Angular组件化开发：构建可复用模块

最新发布

2501_92487957的博客

06-18

320

Angular组件化开发以其高效、易维护和可复用的特点，成为了现代前端开发的重要趋势。通过本文的阐述，我们可以看到Angular组件化开发在提高开发效率、便于维护和扩展、组件通信以及模块化方面的优势。在实际项目中，开发者应充分利用这些优势，构建高质量、可复用的Angular组件。在未来，随着前端技术的不断发展，Angular组件化开发将继续优化和完善。开发者应关注相关技术动态，不断学习和实践，以提高自己的开发能力。

Angular系列二可复用UI

pedro的博客

07-23

236

使用服务来统一可复用UI

公共组件 复用文档

weixin_50885665的博客

11-12

228

是页面之前获取列表数据的方法,可能每个页面获取列表的方法名称不一样。5、 methods 里面添加方法。

angularjs2入门2-使用多个组件

孟繁洋的专栏

03-01

2005

还是 angularjs2入门1-文件结构分析的源码，将app名称改成basic-step2-component 上篇文章入门1讲到的是只有一个组件，多人团队合作的时候就不方便了，要多个人同时开发组件然后合在一起，就需要多个组件。接下来详细讲解一下怎么修改一下代码。 1.创建多个组件组件1：click-me.component.ts import { Component } from '@angular/core'; @Component({ selector: 'click-me',

angular2中自定义模块的构造与使用

web

05-06

594

angular中内置模块有：核心模块：@angular/core 通用模块：@angular/common 表单模块：@angular/forms 网络模块：@angular/http …… angular中的自定义模块前提：当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项目。并且...

自己封装一个公共组件，多配置。怎么拥有一个属于自己的组件轮子，并且是可复用的。例子为：返回顶部按钮组件

xiao_shuai_shua的博客

07-29

754

自己封装一个公共组件，多配置。怎么拥有一个属于自己的组件轮子，并且是可复用的。例子为：返回顶部按钮组件