Angular 에서 MathJax 를 사용 하 는 문제 들

머리말
그런데 나 는 원래 카 텍 스 를 선 호 하 는 편 이 었 다.왜냐하면 나 는 그 가 매우 빠 르 고 MathJax 가 어 울 리 기 어 려 울 것 같 았 기 때문이다.그러나 여러분 들 은 기능 이 부족 한 카 텍 스에 대해 호감 이 없다 며 저 에 게 MathJax 를 연구 하 는 동력 을 제공 해 주 었 습 니 다.
MathJax 소개
MathJax 는 브 라 우 저 에서 실행 되 는 오픈 소스 수학 기호 렌 더 링 엔진 으로 MathJax 를 사용 하면 브 라 우 저 에 수학 공식 을 편리 하 게 표시 할 수 있 으 며 그림 을 사용 하지 않 아 도 됩 니 다.현재 MathJax 는 Latex,MathML,ASCIMathML 의 태그 언어 를 해석 할 수 있다.MathJax 프로젝트 는 2009 년 에 시작 되 었 습 니 다.발기인 은 American Mathematical Society,Design Science 등 이 있 고 많은 지지자 들 이 있 습 니 다.개인 적 으로 MathJax 가 앞으로 수학 기호 렌 더 링 엔진 의 주류 가 될 것 이 라 고 생각 합 니 다.지금 은 그 럴 수도 있 습 니 다.
개인 적 으로 연구 하 는 것 도 아 닙 니 다.실제 MathJax 는 간단 하기 때 문 입 니 다.호출MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); 하면 하나의 요 소 를 렌 더 링 할 수 있 습 니 다.순차 집행.예 를 들 어 이['type:set',MathJax.Hub,this.element.nativeElement],첫 번 째 요 소 는 방법 명 이 고 두 번 째 요 소 는 this 이 며 그 다음 요 소 는 모두 매개 변수 입 니 다.
우 리 는 이것 이 집행MathJax.Hub.Typeset(this.element.nativeElement) 에 해당 하 는 것 을 볼 수 있 습 니 다.그런데 왜 이것 을 집행 하지 않 습 니까?이 방법 은 동기 화 되 기 때문에 페이지 가 매우 끊 길 수 있다.그래서 MathJax 는 스스로 비동기 대기 열 을 봉 인 했 습 니 다.(API 가 몇 백 년 동안 바 뀌 지 않 았 을 수도 있 습 니 다.)
Angular 로 가자 고.markdown 을 사용 해 야 하기 때문에,나의 생각 은 marked 로 directive 를 봉인 하 는 것 이다.그러면 우 리 는 marked 렌 더 링 이 끝 난 후에 MathJax 로 Typeset 이라는 구성 요 소 를 사용 해 야 합 니 다.그러나 정말 이렇게 했 는데 묘 한 효과 가 생 겼 다.페이지 를 전환 한 후에 1 분 가까이 기 다 려 야 렌 더 링 을 시작 할 수 있다.나 는 그것 의 대열 에 몇 개의 log 를 넣 었 는데,모든 요소 가 queue 에 의 해 4 번,몇 십 개의 요소 가 있 는 것 을 발견 하 였 다.어쩐지 1 분 이 걸 려 서 야 다음 페이지 의 내용 을 과장 하기 시작 하 더 라 니,대부분의 markdown 에는 수학 이 전혀 없 더 라 도.
이때 나 는 낙심 하기 시 작 했 는데,이 문 제 는 해결 방법 이 없 습 니까?절망 할 때,나 는 직접 Typeset document 을 할 수 있 을 지 생각 했다.결 과 는 가능 하고 매우 빠르다.그래서 렌 더 링 이 느 리 지 않 습 니 다.렌 더 링 의 초기 화 과정 이 느 린 것 같 습 니 다.그러면 이때 방안 이 나 왔 습 니 다.우 리 는 렌 더 링 횟수 를 최대한 줄 이 고 document 만 렌 더 링 할 수 있 습 니 다.이 렌 더 링 이 진행 되 고 있다 면 아무리 많은 요소 quue 가 올 라 와 도 우 리 는 quue 로 만 생각 합 니 다.
그래서 나 는 이렇게 service 를 썼 다.

@Injectable()
export class MathjaxService {
 public isQueued = false;
 public isRunning = false;
 window: any;
 constructor(@Inject(PLATFORM_ID) private platformId: Object) {
 if (isPlatformBrowser(this.platformId)) {
 this.window = window as any;
 }
 }
 finishRunning() {
 this.isRunning = false;
 if (this.isQueued) {
 this.queueChange();
 }
 }
 queueChange() {
 if (this.isRunning) {
 this.isQueued = true;
 } else {
 this.isQueued = false;
 this.isRunning = true;
 if (isPlatformBrowser(this.platformId)) {
 if (this.window.MathJax) {
  this.window.MathJax.Hub.Config({
  messageStyle: 'none',
  tex2jax: {
  // preview: 'none',
  inlineMath: [['$', '$']],
  processEscapes: true
  }
  });
  this.window.MathJax.Hub.Queue(['log', console, 'start'], ['Typeset', this.window.MathJax.Hub, document], ['log', console, 'end'], ['finishRunning', this]);
 }
 } else {
 this.finishRunning();
 }
 }
 }
}

사실은 그것 이 임 무 를 원만 하 게 완성 할 수 있다 는 것 을 증명 한다.즉,현재이 사이트에서 실행 되 고 있 는 코드 이다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.