# mathjax公式渲染
# 1. 引入 mathjax
<script type="text/javascript" src="https://cdn.eiduo.com/assets/jquery/jquery.js"></script>
<script type="text/javascript" src="https://www.eiduo.com/formula-engine/static/mathjax/MathJax.js?config=TeX-AMS_CHTML"></script>
<script type="application/javascript">
window._$_ = $;
window.MathJax = MathJax;
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. 创建 global.service.ts
import {Injectable} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GlobalService {
constructor() {
}
nativeGlobal() {
return window
}
}
// 在需要用到 GlobalService 的组件所在的 module 中引入
// providers: [GlobalService]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 3. 创建 mathjax 组件，实现双向绑定
# 3.1 mathjax.component.html
<span id="mathContent" [innerHTML]="content"></span>
1
# 3.2 mathjax.component.scss
/** 样式表 **/
1
# 3.3 mathjax.component.ts
import {Component, ElementRef, forwardRef, OnInit} from '@angular/core';
import {GlobalService} from "../../global.service";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
@Component({
selector: 'res-plat-mathjax',
templateUrl: './mathjax.component.html',
styleUrls: ['./mathjax.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MathjaxComponent),
multi: true
}]
})
export class MathjaxComponent implements OnInit, ControlValueAccessor {
content: string;
MathJax;
el: any;
constructor(public gs: GlobalService, private elementRef: ElementRef) {
}
ngOnInit(): void {
this.el = this.elementRef.nativeElement.querySelector('span');
this.loadMathConfig()
this.renderMath();
}
writeValue(obj: any): void {
if (obj) {
this.content = obj;
} else {
this.content = '';
}
this.renderMath()
}
renderMath() {
this.MathJax = this.gs.nativeGlobal()['MathJax'];
this.MathJax.Hub.Queue(["Typeset", this.MathJax.Hub], this.el);
}
loadMathConfig() {
this.MathJax = this.gs.nativeGlobal()['MathJax'];
this.MathJax.Hub.Config({
showMathMenu: false,
tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]]},
CommonHTML: {linebreaks: {automatic: true}},
"HTML-CSS": {linebreaks: {automatic: true}},
SVG: {linebreaks: {automatic: true}}
});
}
registerOnChange(fn: any): void {
this.onModelChange = fn;
}
registerOnTouched(fn: any): void {
this.onModelTouched = fn;
}
private onModelChange: Function = () => {
};
private onModelTouched: Function = () => {
};
}
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# 4. 使用 mathjax 组件
<res-plat-mathjax [(ngModel)]="htmlContent"></res-plat-mathjax>
1
import {AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
@Component({
selector: 'res-plat-question-view',
templateUrl: './question-view.component.html',
styleUrls: ['./question-view.component.scss']
})
export class QuestionViewComponent implements OnInit, OnChanges {
htmlContent: string = '';
constructor(private commonModelService: CommonModelService) {
}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes && changes.htmlContent && changes.htmlContent.currentValue) {
this.htmlContent = changes.htmlContent.currentValue;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
← 拦截器