Angular6笔记之全局组件

在使用 Angular6 做项目的时候，组件只能在一个模块内进行声明，也就是说，在默认情况下，组件编写完成后都得在某个模块先根据文件路径引入该组件，然后在 NgModule 的参数 declarations 进行添加，就可以在该模块的其他组件中进行使用了，注意，只能是该模块中。

那么，问题来了，我们的项目不可能只有一个模块吧，如果我有一些组件是需要全局作用的呢？这时候就是 NgModule 的 exports 属性登场的时候了。我们知道，imports 属性用来导入 可声明的类 ，而 exports 就可以用来导出 可声明的类 。

注：可声明的类通常指的就是组件、指令和管道。

所以，我们只需要新建一个模块，然后在该模块中对 可声明的类 进行声明（declarations），然后导出（exports），之后只需要在其他模块导入该模块，就可以使用这些 可声明的类 了。

代码实现：

# app-common.module.tsimport { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';import { BaseButtonComponent } from './components/base-button/base-button.component'@NgModule({imports: [CommonModule],declarations: [BaseButtonComponent],exports: [BaseButtonComponent]
})
export class AppCommonModule { }# app.module.tsimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppCommonModule } from './app-common/app-common.module'import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppCommonModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }复制代码

目录结构大致如下：

。

如果有疑问，欢迎大家在下方进行评论。

Angular6笔记之全局组件相关推荐

三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue 循环递归组件_全局组件实现递归树，避免循环引用
概述目录分类展示会通常要用到树形结构.本例结合vue的父子组件,采用递归渲染,实现一个基于树的curd小demo 知识点父子组件递归渲染 class 样式对象写法,CSS伪元素 ::before ...
Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与"加载中--"打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一 ...
组件化开发思想||全局组件注册语法||组件注册注意事项
组件化开发思想编程中的组件化思想体现组件化规范: Web Components 全局组件注册语法 <!DOCTYPE html> <html lang="en" ...
Vue组件之全局组件与局部组件
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 {{info.title ...
VueJS组件之全局组件与局部组件
全局组件所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

Angular6笔记之全局组件

Angular6笔记之全局组件相关推荐

最新文章

热门文章