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

最新推荐文章于 2022-11-12 10:47:29 发布

lorena0928

最新推荐文章于 2022-11-12 10:47:29 发布

阅读量5.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： angular2

本文链接：https://blog.youkuaiyun.com/lorena0928/article/details/80238974

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lorena0928

关注关注

2
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

web

05-06

565

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

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

10-21

主要介绍了Angularjs 创建可复用组件实例代码的相关资料,需要的朋友可以参考下

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

vue angular 组件复用性

Future1994的博客

04-15

516

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

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

学无止境

08-27

750

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

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

culiu9261的博客

07-21

754

构建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...

Angular2入门教程之模块和组件详解

08-30

7. 组件间的通信：组件可以通过属性绑定、事件绑定、服务注入等方式实现通信。例如，父组件可以通过属性将数据传递给子组件，子组件则通过事件向父组件发送消息。 8. 模块的层次结构：在大型应用中，可以创建多个...

利用Angular.js编写公共提示模块的方法教程

10-19

Angular.js 提供了强大的模块化系统，使得我们可以轻松创建和复用组件，其中之一就是公共提示模块。这个模块通常用于在用户交互时显示警告、错误或成功消息，提升用户体验。以下是一个关于如何在Angular.js中编写...

angular2模块和共享模块详解

08-27

总结起来，Angular2的模块机制提供了一种组织和复用代码的有效方式。共享模块是模块化设计的重要组成部分，它使得我们可以轻松地在不同模块之间共享组件、指令和服务。通过正确地创建和使用共享模块，可以提高代码的...

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

qq_35703552的博客

03-03

946

公共服务的提取 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组件

09-06

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

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

04-08

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

Angular系列二可复用UI

pedro的博客

07-23

220

使用服务来统一可复用UI

公共组件 复用文档

weixin_50885665的博客

11-12

213

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

angularjs2入门2-使用多个组件

孟繁洋的专栏

03-01

1996

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

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

xiao_shuai_shua的博客

07-29

725

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

angular+ng-zorro路由、表格组件

JUST_lOVE_LE的博客

11-13

835

继续上次的内容，上次的内容为angular整合ng-zorro、左边导航栏。首先新建一个组件,下面代码会在src/app/pages路径下新建一个menus的组件 ng g component pages/menus 新建完组件后删除menus.component.spec.ts文件，这一下文件目录如下图所示：比较重要的文件我都框起来了，app-routing.module.ts就是路由文件，修改变量routes为: const routes: Routes = [ { path: '', pa

手牵手教你使用ngComponentOutlet创建一个支持自定义插入子组件的angular公共搜索表单组件

qq_43429963的博客

01-12

1227

这几天笔者所接手的angular项目需要重新封装一个公共表单组件，由于之前封装的表单组件自由度不够，每出现一种新的类型的特殊输入框就需要在公共表单组件中增添一个新的子组件，导致公共表单组件愈发臃肿与难以维护，因而笔者查阅网上资料与官方文档后，使用 ng-container 与*ngCompnentOutlet 指令重新封装了一个自由度更高的公共表单组件，在此以demo的形式记录一下开发思想与过程，希望能够提供给大家一种思路。首先我们打开我们的项目，创建一个公共的 form...

angular公共组件声明和使用

zwbHUST的博客

02-19

1522

如果要声明一个公共组件，在app.module.ts中引入，declarations元数据数组中声明。这样所有属于AppModule模块的其他组件模板都可以使用。注意红字部分，在app.module.ts中声明公共组件，只有属于AppModule模块的其他组件的才能使用，有些子模块中的组件不能使用这个app.module.ts中声明公共组件。 ...