refactor: thinking in new markdown render

src/app/presentation/reporter/reporter.component.ts

@@ -13,5 +13,4 @@ export class ReporterComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
 }

src/app/shared/components/markdown-reporter/markdown-reporter.component.html

@@ -1,3 +1,10 @@
-<div *ngFor="let chart of charts;" class="charts">
-  <component-markdown-chart [data]="chart"></component-markdown-chart>
+<div *ngFor="let token of markdownData" class="markdown-reporter">
+  <div *ngIf="token.type === 'table'">
+    <div class="charts">
+      <component-markdown-chart [data]="token.data"></component-markdown-chart>
+    </div>
+  </div>
+  <div *ngIf="token.type === 'paragraph'">
+    <p>{{token.text}}</p>
+  </div>
 </div>

src/app/shared/components/markdown-reporter/markdown-reporter.component.scss

@@ -1,4 +1,8 @@
-.charts {
+.markdown-reporter  {
   width: 960px;
   margin: 4em auto 0;
 }
+
+.charts {
+
+}

src/app/shared/components/markdown-reporter/markdown-reporter.component.ts

@@ -12,6 +12,7 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
   @Input()
   content: string;
   charts: ReporterChartModel[] = [];
+  markdownData: any[] = [];
 
   constructor() {
   }
@@ -26,6 +27,7 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
 
   private buildChartData(content: string) {
     const tokens = marked.lexer(content);
+    console.log(tokens);
     this.buildData(tokens);
   }
 
@@ -42,12 +44,21 @@ export class MarkdownReporterComponent implements OnInit, AfterViewInit {
   }
 
   private buildData(tokens: marked.Token[]) {
-    const markdownData = [];
     for (const token of tokens) {
-      if (token.type === 'table') {
-        if (token.cells[0].length === 2) {
-          this.charts.push(this.buildMarkdownChart(token));
-        }
+      switch (token.type) {
+        case 'table':
+          if (token.cells[0].length === 2) {
+            const chartInfo = this.buildMarkdownChart(token);
+            this.charts.push(chartInfo);
+            this.markdownData.push({
+              type: 'table',
+              data: chartInfo
+            });
+          }
+          break;
+        default:
+          this.markdownData.push(token);
+          break;
       }
     }
   }

src/assets/docs/reporter.md

@@ -1,3 +1,5 @@
+来源：[http://www.idcquan.com/Special/2019trucs/](http://www.idcquan.com/Special/2019trucs/)
+
 | 敏捷开发技术 | 占比 |
 |-------------|---------|
 | 每日站会     | 50.93% |