深度优先

这个家伙好懒，除了文章什么都没留下

0%

发表于 分类于
本文字数： 2.6k 阅读时长 ≈ 2 分钟

转自：https://www.cnblogs.com/yangfantianxia/p/7878823.html

1.安装

1
2
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader　
1
2.配置（文本背景部分为该模块新增的）~app.module.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { I18nComponent } from './i18n.component'
import { HttpClientModule ,HttpClient} from '@angular/common/http';

export function createTranslateHttpLoader(http: HttpClient) {

return new TranslateHttpLoader(http, '/app/assets/i18n/', '.json');

}

imports: [
　　　　BrowserModule,
　　　　FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
　　　　ReactiveFormsModule,
　　　　AppRoutingModule,//路由模块
　　　　CommonModule,
　　　　FileUploadModule,
　　　　HttpClientModule,
　　　　TranslateModule.forRoot({
　　　　　　　　loader: {
　　　　　　　　　　　　　　provide: TranslateLoader,
　　　　　　　　　　　　　　useFactory: (createTranslateHttpLoader),
　　　　　　　　　　　　　　deps: [HttpClient]
　　　　　　　　　　　　}
　　　　　　　　})
　　　　　　],

3.组件部分(i18n.component.ts)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'

@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'i18n.component.html'
})

export class I18nComponent implements OnInit {
constructor(private translateService: TranslateService) {
}

ngOnInit() {
　　　　this.translateService.addLangs(["ch", "en"]);
　　　　this.translateService.setDefaultLang("ch");
　　　　const browserLang = this.translateService.getBrowserLang();
　　　　this.translateService.use(browserLang.match(/ch|en/) ? browserLang : 'ch');
　　　　}
}

4.i18n.component.html

1
2
3
4
<div>
    <span> hello dih</span>
    <h1>{{ 'hello' | translate }}</h1>
</div>

5.创建需要翻译的json语言 （注意：该路径是app.module中的调用的路径）

en.json

1
2
3
4
{
   "hello": "the word is hello"
}

ch.json 

1
2
3
{
   "hello": "你好"
}

通过以上配置即可完成i18n国际化语言的转化，但是还有些坑需要自己踩。。。。

以下是通过自己的实战经验解决的问题，也许能帮助大家，往下看

1.bug1 (GET http://localhost:3000/@ngx-translate/core 404 (Not Found))

解决方案如下：

  1. 需要在systemjs.config.js中添加

‘@ngx-translate/core’: ‘npm:@ngx-translate/core/bundles/core.umd.js’,

‘@ngx-translate/http-loader’: ‘npm:@ngx-translate/http-loader/bundles/http-loader.umd.js’,

2.bu2(http 404 (Not Found))

解决方案如下：

1.在app.module.ts中把http换成HttpClient，上面的已经修改后的

2.需要在systemjs.config.js中添加@angular/common/http

3.bug3 (tslib 404 not found)

解决方案如下：

1.在systemjs.config.js中添加以下配置

path:新增’npm:’: ‘https://unpkg.com/'

map新增’tslib’: ‘npm:tslib@1.6.1‘

通过以上配置，即可根据浏览器语言设置来加载国际化语言了

英文如下：

中文如下：

谷歌浏览器高级语言移动顶部保存刷新F5语言

发表于 分类于
本文字数： 2k 阅读时长 ≈ 2 分钟

转自：https://segmentfault.com/a/1190000012477096

1、安装html2canvas

1
npm install --save html2canvas

官方网站

https://html2canvas.hertzen.com/

2、在需要的组件中引入html2canvas

1
2
// 导入整个模块的内容
import * as html2canvas from 'html2canvas';

3、定义方法，将数据转换为canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// #mainTable是数据表格的id
takeScreenShot() {
        // 使用html2canvas插件，将数据源中的数据转换成画布。
        html2canvas(document.querySelector("#mainTable")).then(canvas => {
            // 修改生成的宽度
            canvas.style.width = "1000px";
            console.log(canvas, "生成的画布文件");
            this.canvasImg = canvas.toDataURL("image/png");
        });
    }
    
// 然后给初始化的public canvasImg: any = ""; 复制，他就是图片地址。

// 展示图片
<img src="{{canvasImg}}" />

4、将图片下载到本地，定义转换图片格式方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// filename: 文件名称， content: canvas图片流地址
downloadFile(filename, content) {
    var base64Img = content;
    var oA = document.createElement('a');
    oA.href = base64Img;
    oA.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    oA.dispatchEvent(event);
}


// 方法调用
saveImgLocal() {
    this.downloadFile("导出图片", this.canvasImg);
}

5、下载

1
<button label="下载" pButton (click)="saveImgLocal()"></button>

6、设置画布大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var shareContent = document.getElementById("mainTable");//需要截图的包裹的（原生的）DOM 对象
    var width = shareContent.offsetWidth; //获取dom 宽度
    var height = shareContent.offsetHeight; //获取dom 高度
    var canvas = document.createElement("canvas"); //创建一个canvas节点
    var scale = 1; //定义任意放大倍数 支持小数
    canvas.width = width * scale; //定义canvas 宽度 * 缩放
    canvas.height = height * scale; //定义canvas高度 *缩放
    canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
    var opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关
        width: width, //dom 原始宽度
        height: height //dom 原始高度
    };
    html2canvas(shareContent, opts).then(canvas => {
        this.canvasImg = canvas.toDataURL("image/png");
        console.log(canvas)
    });

发表于 分类于
本文字数： 809 阅读时长 ≈ 1 分钟

转自：http://blog.csdn.net/u012396955/article/details/78852140

一、新建一个子组件

1
ng g component child

二、子组件中添加要被调用的方法

child.component.ts

1
2
3
4
5
6
7
8
9
10
export class ChildComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

  greeting(name:string){
    console.log('hello'+name);
  }
}

三、主组件添加html代码

此处用2种方法呈现效果：

app.component.html

1
2
3
4
5
6
<!--1.在控制器里用typescript代码实现-->
<app-child #child1></app-child>

<!--2.在模板上用模板变量实现-->
<app-child #child2></app-child>
<button (click)="child2.greeting('Jerry')">按钮调用child2的greeting方法</button>

四、主组件控制器加相关调用

app.component.ts

1
2
3
4
5
6
7
8
9
export class AppComponent implements OnInit{

  @ViewChild('child1')
  child1:ChildComponent;

  ngOnInit(): void {
    this.child1.greeting('tom');
  }
}

五、执行效果

这里写图片描述