angular共享模块的使用
来源:互联网 发布:金融类电影 知乎 编辑:程序博客网 时间:2024/05/17 21:48
这里的共享模块的书写形式是看了大漠大神的nicefish后弄出来的,熟悉了angular2后再去看大神的项目感觉不一样了
现在来说明一下怎么运用
1. 先来看页面框架
2.确定有两个懒加载路由,为两个父级目录加上导航条
app.module.ts 路由加载
const routes: Routes = [
{path: ”, redirectTo: ‘setting’, pathMatch: ‘full’},
{path: ‘setting’,loadChildren: ‘./setting/setting.module#SettingModule’},
{path: ‘dashboard’,loadChildren: ‘./dashboard/dashboard.module#DashboardModule’},
{path: ‘login’,component:LoginComponent}
];
3.确定需要分享的导航组件testcommon
ng g c testcommon(这里下了angular-cli按理说就能使用ng命令,但是如果angular-cli版本低了的话会有警告最后可能出错不能全局创建组件)
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-testcommon’,
templateUrl: ‘./testcommon.component.html’,
styleUrls: [‘./testcommon.component.css’]
})
export class TestcommonComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
4.全局创建一个共享的module装这个需要共享的组件 这里创建的是common-module
common-module.module.ts的代码如下:
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { TestcommonComponent } from “../setting/testcommon/testcommon.component”;
@NgModule({
imports: [
CommonModule
],
declarations: [TestcommonComponent],//这里引入共享的组件
exports:[CommonModule,TestcommonComponent] ////这里将共享的组件放入到导出的出口中
})
export class CommonModuleModule { }
5.在模块中引入module
dashboard.module.ts中引入module:
@NgModule({
imports: [
CommonModule,
CommonModuleModule,//共享模块
RouterModule.forChild(route)
],
declarations: [DashboardComponent, TestComponent, ModeltestComponent]
})
6.在模块中引入module后,在html中引入组件
dashboard.component.html中引入
dashboard works!
7.setting如上写上即可,效果图
ps:补充
如果在引入的共享的组件中存在routerLink那么在共享的module里面要引入RouterModule ,如果共享组件中有service也在共享module中的privoder:引入service
- angular共享模块的使用
- angular如何实现不同模块的变量共享
- (六)使用angular.bootstrap完成模块的手动加载
- 使用angular.bootstrap完成模块的手动加载
- 使用angular.bootstrap完成模块的手动加载
- angular的动画ngAnimate模块
- AngularJS学习:Angular的模块
- 使用路由延迟加载 Angular 模块
- 使用路由延迟加载 Angular 模块
- angular模块
- Angular 模块
- Angular 模块
- angular:conctroller的数据共享、继承、通信
- angular controller的使用
- angular foreach的使用
- angular ngOptions的使用
- angular directive的使用
- angular JS的使用
- 文章标题
- python 关于生成器的零碎
- 面向对象
- (一)ARM体系结构.硬件组成原理.工作模式
- 做了几道Linux笔试题1
- angular共享模块的使用
- Revit中Dynamo编程——Python代码(类)
- MyBatis知识点
- 线程——同步与死锁
- 机器学习(二):决策树
- 异常
- 编译最小linux系统
- 用机器学习解决LeetCode问题
- 抽象类