Angular学习笔记80：Angular共享模块

最新推荐文章于 2023-11-14 08:59:54 发布
最新推荐文章于 2023-11-14 08:59:54 发布
阅读量635 收藏 2
点赞数
分类专栏： # Angular 文章标签： 共享模块
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjyyhhxit/article/details/103152733
版权

有时候在项目中，会有一些组件需要经常用到，比如像下面这种二级标题

在这里插入图片描述

这种二级标题可能会整个应用都会用到，所以需要将它作为一个共通的组件来使用。

制作一个共享模块

新建一个component目录

  • 新建一个component目录，在app目录下执行命令：
mkdir component
  • 切换到component目录
cd component

创建二级标题组件

执行命令：ng g c secondaryTitle

➜  component git:(master) ✗ ng g c secondaryTitle 
CREATE src/app/component/secondary-title/secondary-title.component.less (0 bytes)
CREATE src/app/component/secondary-title/secondary-title.component.html (34 bytes)
CREATE src/app/component/secondary-title/secondary-title.component.spec.ts (685 bytes)
CREATE src/app/component/secondary-title/secondary-title.component.ts (305 bytes)
UPDATE src/app/app.module.ts (1909 bytes)

使用Angular/cli创建的项目因为component目录中上级模块就是 app.module，所以会自动更新到 app.module的 declarations数组中。

在这里插入图片描述
但是这里并不是所需要的结果，所以在这里将 secondary-title这个组件从 app.module的 SecondaryTitleComponent数组中删除并删除其引用。

修改 SecondaryTitleComponent

修改SecondaryTitleComponent模版文件

<div class="divTitle">
  <h3><span class="setThemeTitle"></span>
    <ng-content>
最低0.47元/天 解锁文章
wujiayucn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 实现模块共享
qq_39962271的博客
11-22 696
是一个特殊的运算符，被称为展开运算符（Spread Operator）。它可以用于在函数调用、数组初始化和对象的属性中展开可迭代的元素。需要注意的是，展开运算符只能用于可迭代的元素，例如数组、字符串、对象等。对于不可迭代的元素，例如数字、布尔值等，展开运算符会引发编译错误。在函数调用中，展开运算符可以将一个数组或可迭代的对象展开为函数的参数列表。在数组初始化中，展开运算符可以将一个数组的元素展开到一个新数组的初始化中。在对象的属性中，展开运算符可以将一个数组或可迭代的对象展开为对象的属性值。
angular自定义共享模块
打字员blog
02-26 476
在开发项目过程中，我们常常遇到一些功能相似，UI相同的组件；这时候，我们会希望通过写一个能用公用的组件，来提升我们的开发效率。 以开发一个分页组件为例，我们来看看如何使用share component： 开发背景：Angular 7 + Angular Material； 首先，我们先来创建一个component放在common文件夹中（common文件夹是放所有公用组件的地方）： ng gene...
Angular管理共享组件
打字员blog
11-06 561
目标：将使用频繁的组件抽离出来，集中管理；以便在需要使用的地方，方便快速引用； 第一步：创建一个shared component：（该文件夹下，放置需要抽离的组件） ng generate component shared 第二步：在shared.module.ts文件里，声明需要共享的组件并export出去：（以date组件为例） 第三步：在app.module.ts里引用shared模块...
Angular共享模块的使用方法
旧时佑忆的空间
07-08 929
在Angular使用过程中，如果我们创建完主要的功能模块后，发现功能模块中其实会有很多功能一样的小组件，或者存在一些需要额外实现的功能组件，此时我们可以创建一个共享的模块，这个模块可以为整个工程提供引用服务 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; 需要导入common模块来确定这是一个共享模块，并且所有共享的模块必须放在同一个目录下，演示目录结构如下所示 .
angular共享模块的使用,含共享组件的使用
xwnxwn的专栏
08-24 6254
这里的共享模块的书写形式是看了大漠大神的nicefish后弄出来的，熟悉了angular2后再去看大神的项目感觉不一样了 现在来说明一下怎么运用 1. 先来看页面框架 2.确定有两个懒加载路由，为两个父级目录加上导航条 app.module.ts 路由加载  const routes: Routes = [  {path: ”, redirectTo: ‘setting’, pathM...
Angular2学习笔记——详解NgModule模块
11-28
总的来说，Angular2的 NgModule 机制是构建大型、复杂应用的关键，它通过模块化组织代码，提供了服务、组件和指令的隔离与共享，以及延迟加载等优化手段，帮助开发者构建高效、可扩展的单页应用。
angular 学习笔记
12-20
- DI是Angular的核心特性，用于在组件和服务之间共享状态和服务。 - 提供器（Provider）和注入器（Injector）协同工作，提供依赖实例化和注入。 5. **数据绑定和响应式编程**： - 双向数据绑定`[(ngModel)]`简化...
angular-tutorial：一些角度教程-《 Angular学习笔记》
01-31
《Angular学习笔记》是针对Angular框架的一份详细教程，它涵盖了从基础到进阶的各种概念和技术。Angular是一款由Google维护的开源JavaScript框架，用于构建单页应用（SPA）。本教程旨在帮助开发者理解并掌握Angular...
angular学习笔记
06-09
第三方模块的集成可以通过`angular.module('myApp', ['dependency'])`来声明依赖关系。此外，你可以使用`$injector`服务来动态注入服务，或者在控制器定义中使用`@Context`注解注入如Request、Response等上下文对象...
angular4 php,如何使用angular4共享组件通信
weixin_31499719的博客
03-22 123
这次给大家带来如何使用angular4共享组件通信，使用angular4共享组件通信的注意事项有哪些，下面就是实战案例，一起来看一下。应用场景，不同组件中操作统一组数据，不论哪个组件对数据进行了操作，其他组件中立马看到效果。这样他们就要共用一个服务实例，是本次的重点，如果不同实例，那么操作的就不是同一组数据，那么就不会有这样的效果，想实现共用服务实例，就是在所有父组件中priviates:[]中引...
angular_deno:Angular Deno-具有Deno的服务器中的实验性Angular渲染器
04-28
Deno中的角度渲染器 现在支持Angular 11.0.5和Deno 1.8.0 这是实验性Angular SSR，将用作 Web框架以及车把，ejs和胡须的渲染器。 如何使用 deno run --importmap=importmap.json --location=https://jspm.dev --allow-read main.ts 声明角部 importmap.json： { " imports " : { " @angular/core " : " https://jspm.dev/@angular/core@11.0.5 " , " @angular/deno " : " https://deno.land/x/angular_deno/mod.ts " , " @angular/deno/ " : " https://deno.la
Angular 模块介绍及使用（二）
最新发布
Kuangtian的博客
11-14 1054
Angular 模块介绍及使用
通过软链接共享node_modules
博客简介
09-09 3222
由于公司前端项目多，框架基本上都是固定的，依赖也都一致。每个项目都得单独单独安装依赖，总是感觉太麻烦，有的项目依赖众多，node_modules下的文件数量更是多得恐怖，就算是拷贝也得拷很久（不建议拷贝依赖），直接下可能更慢。 通过软链接共享node_modules： 当两个项目依赖完全一致时，我们可以只下载A项目的依赖，通过创建软连接，让B项目依赖目录直接指向A目录。 windows下创建软链接命令（以管理员身份运行）： mklink /d D:\project\B\node_modules D
Angular Module 共享模块使用 父模块使用多个子模块
weixin_30271335的博客
05-25 919
Component.module.ts import {BrowserModule} from '@angular/platform-browser'; import {LocationStrategy, HashLocationStrategy} from '@angular/common'; import {NgModule} from '@angular/core'; ...
angular简单调用model
huihuangjiuai的专栏
03-18 688
angular.module('hairApp', []).config(['$interpolateProvider', function($interpolateProvider) {     $interpolateProvider.startSymbol('{[{');     $interpolateProvider.endSymbol('}]}'); }])
angular实现全局组件
baidu_41601048的博客
08-18 1249
之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在declares:[component],然后exports出该组件。最后在页面中每次导入该组件，而这次我们将采用另一种方式来实现。2 新建一个share.module.ts,在该module中引入我们所有的公共组件，本例中只有一个导航组件NavbreadcrumbComponent。3 在需要用到该组件的页面中引入share.module.ts模块（home.ts.about.ts分别引入）
Angular目录结构分析以及app.module.ts详解
BADAO_LIUMANG_QIZHI的博客
04-22 2188
场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017 在上面搭建的Angular项目的目录结构如下 具体的目录结构的作用如下 注： 博客：https://blog.csdn.net/badao_liumang...
Angular学习笔记一之项目构建与模块创建
weixin_45855469的博客
04-18 2061
Angular是三大框架之一，是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架，为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具，组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理是相当到位的，可以轻松实现组件之间的数据共享。
Angular学习笔记61：Angular中常见的模块总结
W先生
09-11 217
在Angular应用中，Angular所依赖的模块不止一个，当我们需要某种功能特性的时候，就可以通过添加模块来实现，现在来总结一下常用的模块。 Angular 自己的模块 NgModule 导入 使用目的 BrowserModule @angular/platform-browser 在浏览器中运行Angular应用必备 BrowserAnimationsModule @ang...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值