angular共享模块的使用,含共享组件的使用

这里的共享模块的书写形式是看了大漠大神的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

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular中,可以使用ngx-translate库来实现多语言翻译,并将其应用于共享组件中。以下是一个示例步骤来实现这一点: 1. 首先,确保已经安装了ngx-translate库。可以使用以下命令进行安装: ``` npm install @ngx-translate/core @ngx-translate/http-loader ``` 2. 在根模块(通常是AppModule)中导入ngx-translate库: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule, HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; @NgModule({ imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }, deps: [HttpClient] } }) ], bootstrap: [AppComponent] }) export class AppModule { } ``` 3. 在shared组件使用ngx-translate进行翻译。首先,导入TranslateService和使用它的相关方法: ```typescript import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-shared-component', template: ` <h1>{{ 'GREETING' | translate }}</h1> <p>{{ 'MESSAGE' | translate }}</p> ` }) export class SharedComponent { constructor(private translateService: TranslateService) { } } ``` 4. 在组件使用翻译服务进行翻译。可以在组件的构造函数中初始化翻译服务,并在需要翻译的地方使用`translateService.instant()`方法: ```typescript import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-shared-component', template: ` <h1>{{ greeting }}</h1> <p>{{ message }}</p> ` }) export class SharedComponent { greeting: string; message: string; constructor(private translateService: TranslateService) { this.greeting = this.translateService.instant('GREETING'); this.message = this.translateService.instant('MESSAGE'); } } ``` 5. 最后,在应用的根组件共享组件的父组件使用`<app-shared-component></app-shared-component>`来引入共享组件。 确保在`./assets/i18n/`目录下创建对应的语言翻译文件,例如`en.json`和`zh.json`,并在这些文件中定义相应的键值对。 这样,你就可以在共享组件使用ngx-translate库来实现多语言翻译了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值