{"id":38864,"date":"2023-10-03T19:10:22","date_gmt":"2022-12-17T12:42:53","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular%e5%ae%9e%e7%8e%b0markdown%e6%b8%b2%e6%9f%93%e7%9a%84%e7%ae%a1%e9%81%93\/"},"modified":"2024-05-04T02:41:30","modified_gmt":"2024-05-03T18:41:30","slug":"%e7%94%a8angular%e5%ae%9e%e7%8e%b0markdown%e6%b8%b2%e6%9f%93%e7%9a%84%e7%ae%a1%e9%81%93","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e7%94%a8angular%e5%ae%9e%e7%8e%b0markdown%e6%b8%b2%e6%9f%93%e7%9a%84%e7%ae%a1%e9%81%93\/","title":{"rendered":"\u7528Angular\u5b9e\u73b0Markdown\u6e32\u67d3\u7684\u7ba1\u9053"},"content":{"rendered":"

\u54c8\u55bd\uff01\u4f60\u597d\uff0c\u5f88\u9ad8\u5174\u89c1\u5230\u4f60\u5728\u5965\u65af\u6c40\uff01<\/p>\n

\u7b80\u800c\u8a00\u4e4b<\/h1>\n

\u4eca\u5929\u6211\u60f3\u4ecb\u7ecd\u4e00\u79cd\u4f7f\u7528Angular\u5c06Markdown\u6e32\u67d3\u4e3aHTML\u7684\u65b9\u6cd5\uff01<\/p>\n

\u5728\u4e2d\u56fd, \u6211\u4eec\u53ea\u9700\u8981\u4e00\u79cd\u9009\u62e9\u3002<\/h2>\n

\u4ee5\u524d\uff0c\u6211\u4ecb\u7ecd\u4e86\u5982\u4f55\u4f7f\u7528Lit\u7684Web Components\u6765\u6e32\u67d3Markdown\u7684\u65b9\u6cd5\u3002<\/p>\n

 <\/p>\n

\u5728Angular\u4e2d\uff0c\u60a8\u4e5f\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e2aWeb Component\u6765\u6e32\u67d3Markdown\u3002\u800c\u4e14\uff0c\u6211\u8ba4\u4e3a\u8fd9\u4e5f\u662f\u4e00\u4e2a\u975e\u5e38\u597d\u7684\u5728\u6846\u67b6\u4e2d\u5229\u7528Web Component\u7684\u4f8b\u5b50\u3002<\/p>\n

\u7136\u800c\uff0cAngular\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u5de5\u5177\u6765\u8f6c\u6362\u6570\u636e\u3002<\/p>\n

\u8fd9\u4e2a\u5de5\u5177\u53eb\u505a”Pipes”\uff08\u7ba1\u9053\uff09\u3002<\/p>\n

\u672c\u7bc7\u6587\u7ae0\u4ecb\u7ecd\u4e86\u5982\u4f55\u5236\u4f5c\u81ea\u5b9a\u4e49\u7ba1\u9053\u5e76\u5c06Markdown\u8f6c\u6362\u4e3aHTML\u7684\u65b9\u6cd5\u3002<\/p>\n

Angular\u7684\u7ba1\u9053\u662f\u4ec0\u4e48\uff1f<\/h2>\n

Angular\u7684\u7ba1\u9053\u662fAngular\u7684HTML\u6a21\u677f\u4e2d\u7528\u4e8e\u8f6c\u6362\u5b57\u7b26\u4e32\u6570\u636e\u663e\u793a\u7684\u4fbf\u6377\u529f\u80fd\u3002<\/p>\n

\u6709\u8bb8\u591a\u73b0\u6709\u7684\u7ba1\u9053\u3002<\/p>\n

\n
\u30d1\u30a4\u30d7\u540d\u6a5f\u80fdDatePipe\u65e5\u4ed8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30fb\u6570\u5b57\u30fb\u6587\u5b57\u5217\u3092\u6307\u5b9a\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306b\u5909\u63db\u3059\u308bUpperCasePipe\u6587\u5b57\u5217\u306e\u5168\u3066\u3092\u5927\u6587\u5b57\u306b\u5909\u63db\u3059\u308bLowerCasePipe\u6587\u5b57\u5217\u306e\u5168\u3066\u3092\u5c0f\u6587\u5b57\u306b\u5909\u63db\u3059\u308bCurrencyPipe\u901a\u8ca8\u3092\u30ed\u30fc\u30ab\u30eb\u306b\u5408\u308f\u305b\u3066\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3059\u308bDecimalPipe\u6307\u5b9a\u306b\u5408\u308f\u305b\u3066\u5c0f\u6570\u70b9\u3092\u6587\u5b57\u5217\u306b\u5909\u63db\u3059\u308bPercentPipe\u6307\u5b9a\u306b\u5408\u308f\u305b\u3066\u6570\u5b57\u3092\u30d1\u30fc\u30bb\u30f3\u30c8\u306e\u6587\u5b57\u5217\u306b\u5909\u63db\u3059\u308b<\/div>\n<\/div>\n

\u8ba9\u6211\u4eec\u5728\u67d0\u4e2a\u7ec4\u4ef6\u7684 HTML \u6a21\u677f\u4e2d\u5c1d\u8bd5\u4f7f\u7528 UpperCasePipe\u3002<\/p>\n

content_copy<\/span>\r\nimport<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-hero-birthday<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/my-component.component.html<\/span>'<\/span>,<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> HeroBirthdayComponent<\/span> {<\/span>\r\n  public<\/span> name<\/span> =<\/span> \"<\/span>austin<\/span>\"<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
<h1><\/span>{{ this.name | uppercase }}<\/h1><\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\u4f1a\u663e\u793a\u5982\u4e0b\u5185\u5bb9\uff1a<\/p>\n
AUSTIN<\/code><\/pre>\n
\u6709\u5f88\u591a\u8fd9\u6837\u7684\u7ba1\u9053\uff0c\u5b83\u4eec\u662f\u975e\u5e38\u5f3a\u5927\u7684\u5de5\u5177\u3002\u901a\u8fc7\u7ba1\u9053\u6765\u8f6c\u6362\u663e\u793a\u5185\u5bb9\u662f\u975e\u5e38\u5178\u578b\u7684 Angular \u7279\u8272\u3002<\/p>\n
\u56e0\u6b64\uff0c\u6211\u60f3\u8981\u5c06Markdown\u5b57\u7b26\u4e32\u8f6c\u6362\u4e3aHTML\u5b57\u7b26\u4e32\uff0c\u6240\u4ee5\u5f97\u51fa\u4e86\u4f7f\u7528\u7ba1\u9053\u7684\u7ed3\u8bba\u3002<\/p>\n
\u5b89\u88c5 marked.js<\/h1>\n
\u7531\u4e8e\u4ece\u96f6\u5f00\u59cb\u5236\u4f5c\u80fd\u591f\u6e32\u67d3Markdown\u7684\u8f6f\u4ef6\u975e\u5e38\u56f0\u96be\uff0c\u56e0\u6b64\u6211\u4eec\u4f1a\u4f7f\u7528\u5f00\u6e90\u7684\u4f18\u79c0\u8f6f\u4ef6\u3002<\/p>\n
 <\/p>\n
\u8bf7\u4f7f\u7528\u4ee5\u4e0bCLI\u547d\u4ee4\u5c06\u5176\u6dfb\u52a0\u5230Angular\u9879\u76ee\u4e2d\u3002<\/p>\n
npm install marked\r\n<\/code><\/pre>\n
\u6dfb\u52a0\u81ea\u5b9a\u4e49\u7ba1\u9053<\/h1>\n
\u5728\u73b0\u6709\u7684Angular\u9879\u76ee\u4e2d\uff0c\u6267\u884c\u4ee5\u4e0bCLI\u547d\u4ee4\u5c06markdown.pipe.ts\u6dfb\u52a0\u5230\u9879\u76ee\u4e2d\u3002<\/p>\n
ng generate pipe pipes\/markdown\r\n<\/code><\/pre>\n
\u203b \u4e0d\u9700\u8981\u7ba1\u9053\uff0c\u4f46\u7b46\u8005\u559c\u6b61\u5c07\u7ba1\u9053\u653e\u5165\u7279\u5b9a\u7684\u6587\u4ef6\u593e\uff0c\u56e0\u6b64\u9019\u6a23\u6307\u5b9a\u3002<\/p>\n
\u4e8e\u662f\uff0c\u5728src\/app\/pipes\u76ee\u5f55\u4e0b\u4f1a\u751f\u6210\u4e24\u4e2a\u6587\u4ef6\uff1amarkdown.pipe.spec.ts\u548cmarkdown.pipe.ts\u3002\u4f46\u662f\uff0c\u8fd9\u6b21\u6211\u4eec\u53ea\u5173\u6ce8markdown.pipe.ts\u8fd9\u4e2a\u6587\u4ef6\u3002<\/p>\n
import<\/span> {<\/span> Pipe<\/span>,<\/span> PipeTransform<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Pipe<\/span>({<\/span>\r\n  name<\/span>:<\/span> '<\/span>markdown<\/span>'<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> MarkdownPipe<\/span> implements<\/span> PipeTransform<\/span> {<\/span>\r\n\r\n  transform<\/span>(<\/span>value<\/span>:<\/span> unknown<\/span>,<\/span> ...<\/span>args<\/span>:<\/span> unknown<\/span>[]):<\/span> unknown<\/span> {<\/span>\r\n    return<\/span> null<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8fd9\u4e2atransform\u7c7b\u7684\u51fd\u6570\u80fd\u591f\u6267\u884c\u4e00\u4e9b\u795e\u5947\u7684\u64cd\u4f5c\u3002\u5b83\u4f1a\u8fd4\u56de\u4e00\u4e2a\u5728HTML\u4e2d\u6e32\u67d3\u7684\u7ed3\u679c\u3002<\/p>\n
\u4f7f\u7528\u7c7b\u4f3c\u4e8eMarkdown\u7684\u903b\u8f91\u8f93\u5165\uff0c\u5982\u4e0b\u6240\u793a\uff1aLit\u7684Markdown<\/p>\n
import<\/span> {<\/span> Pipe<\/span>,<\/span> PipeTransform<\/span> }<\/span> from<\/span> \"<\/span>@angular\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> marked<\/span> }<\/span> from<\/span> \"<\/span>marked<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Pipe<\/span>({<\/span>\r\n  name<\/span>:<\/span> \"<\/span>markdown<\/span>\"<\/span>,<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> MarkdownPipe<\/span> implements<\/span> PipeTransform<\/span> {<\/span>\r\n\r\n  transform<\/span>(<\/span>rawMarkdown<\/span>:<\/span> string<\/span>)<\/span> {<\/span>\r\n    return<\/span> new<\/span> Promise<\/span><<\/span>string<\/span>><\/span>((<\/span>resolve<\/span>,<\/span> reject<\/span>)<\/span> =><\/span> {<\/span>\r\n      marked<\/span>.<\/span>parse<\/span>(<\/span>rawMarkdown<\/span>,<\/span> (<\/span>error<\/span>,<\/span> result<\/span>)<\/span> =><\/span> {<\/span>\r\n        if <\/span>(<\/span>error<\/span>)<\/span> return<\/span> reject<\/span>(<\/span>error<\/span>);<\/span>\r\n        resolve<\/span>(<\/span>result<\/span>);<\/span>\r\n      });<\/span>\r\n    });<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728\u8fd9\u91cc\u51fa\u73b0\u4e86\u4e24\u4e2a\u4ee4\u4eba\u62c5\u5fe7\u7684\u95ee\u9898\u3002<\/p>\n
    \n
  1. \n
      transform\u51fd\u6570\u80fd\u5426\u8fd4\u56de\u4e00\u4e2aPromise\uff1f<\/ol>\n<\/li>\n<\/ol>\n
       <\/p>\n
        \u5982\u679c\u8fd4\u56deHTML\u5b57\u7b26\u4e32\uff0cAngular\u4f1a\u8fdb\u884c\u8f6c\u4e49\u5417\uff1f<\/ol>\n
        \u6211\u4eec\u4e00\u8d77\u89e3\u51b3\u8fd9\u4e24\u4e2a\u95ee\u9898\u5427\u3002<\/p>\n
        \u7528\u7ba1\u9053\u5c06Promise\u8f6c\u6362<\/h1>\n
        \u9996\u5148\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4e00\u4e0b\u4e0a\u8ff0\u7684\u7ba1\u9053\u3002<\/p>\n
        import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> \"<\/span>@angular\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> startAppCheck<\/span> }<\/span> from<\/span> \"<\/span>@firebase\/app-check-module<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> \"<\/span>app-root<\/span>\"<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> \"<\/span>.\/app.component.html<\/span>\"<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>\"<\/span>.\/app.component.css<\/span>\"<\/span>],<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\n  public<\/span> raw<\/span> =<\/span> `# Hello World\r\n  \r\n  I am a paragraph`<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        <div><\/span>{{ this.raw | markdown }}<\/div><\/span>\r\n<\/code><\/pre>\n
        \u7ed3\u679c (ji\u00e9 gu\u01d2)<\/h4>\n
        \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
        \u55ef\uff0c\u5927\u6982\u5c31\u662f\u8fd9\u6837\u4e86\u5427\u3002<\/p>\n
        \u53ea\u662f\u663e\u793a\u4e86Promise.prototype.toString()\u7684\u7ed3\u679c\uff0c\u800c\u4e0d\u662fPromise\u7684\u7ed3\u679c\u3002<\/p>\n
        \u5728\u8fd9\u91cc\u53ef\u4ee5\u5e2e\u52a9\u4f60\u7684\u662f\u73b0\u6709\u7684AsyncPipe\u3002<\/p>\n
        \u5728\u4e0a\u8ff0HTML\u6a21\u677f\u7684\u7ba1\u9053\u4f4d\u7f6e\u6dfb\u52a0\u4e00\u4e2a\u7ba1\u9053\u7b26\u53f7\u3002<\/p>\n
        <div><\/span>{{ this.raw | markdown\u3000| async }}<\/div><\/span>\r\n<\/code><\/pre>\n
        \u4fdd\u5b58\u540e\uff0c\u754c\u9762\u4f1a\u53d1\u751f\u53d8\u5316\uff01<\/p>\n
        \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
        \u7136\u800c\uff0c\u95ee\u9898\u8fd8\u6ca1\u6709\u5b8c\u5168\u89e3\u51b3\u3002<\/p>\n
        \u5982\u4f55\u8ba9\u751fHTML\u5728Angular\u4e2d\u53ef\u9760\u5730\u8fd0\u884c<\/h1>\n
        \u7531\u4e8e\u5b89\u5168\u539f\u56e0\uff0cAngular\u9ed8\u8ba4\u4f1a\u5bf9\u672a\u7ecf\u5904\u7406\u7684HTML\u8fdb\u884c\u6b63\u786e\u7684\u8f6c\u4e49\u3002<\/p>\n
        \u5c3d\u7ba1\u8fd9\u4e2a\u529f\u80fd\u539f\u672c\u5f88\u6709\u7528\uff0c\u4f46\u5728\u9700\u8981\u663e\u793aMarkdown\u6e32\u67d3\u7ed3\u679c\u7684HTML\u65f6\u5374\u4f1a\u53d8\u5f97\u59a8\u788d\u3002<\/p>\n
        \u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u60a8\u53ef\u4ee5\u5c06\u7ba1\u9053\u7684\u7ed3\u679c\u7ed1\u5b9a\u5230innerHTML\u3002<\/p>\n
        <div<\/span> [innerHTML]=<\/span>\"this.raw | markdown | async\"<\/span>><\/div><\/span>\r\n<\/code><\/pre>\n
        \u7ed3\u679c (ji\u00e9 gu\u01d2)<\/h4>\n
        \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
        \u7ed3\u679c\u5f88\u7406\u60f3\uff0c\u662f\u5427\uff01<\/p>\n
        \u4f7f\u7528\u7ba1\u9053\u5c06 DomSanitizer \u7528\u4e8e\u4e2d\u6587<\/h2>\n
        \u5728markdown.pipe.ts\u4e2d\uff0c\u60a8\u8fd8\u53ef\u4ee5\u6ce8\u5165\u540d\u4e3aDomSanitizer\u7684\u5e93\uff0c\u5e76\u6307\u5b9a\u5b83\u662f\u4e00\u4e2a\u5e94\u663e\u5f0f\u907f\u514d\u8f6c\u4e49\u7684\u503c\u3002<\/p>\n
        import<\/span> {<\/span> Pipe<\/span>,<\/span> PipeTransform<\/span> }<\/span> from<\/span> \"<\/span>@angular\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> DomSanitizer<\/span> }<\/span> from<\/span> \"<\/span>@angular\/platform-browser<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> marked<\/span> }<\/span> from<\/span> \"<\/span>marked<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Pipe<\/span>({<\/span>\r\n  name<\/span>:<\/span> \"<\/span>markdown1<\/span>\"<\/span>,<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> Markdown1Pipe<\/span> implements<\/span> PipeTransform<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>private<\/span> sanitizer<\/span>:<\/span> DomSanitizer<\/span>)<\/span> {}<\/span>\r\n\r\n  transform<\/span>(<\/span>rawMarkdown<\/span>:<\/span> string<\/span>)<\/span> {<\/span>\r\n    return<\/span> new<\/span> Promise<\/span><<\/span>string<\/span>><\/span>((<\/span>resolve<\/span>,<\/span> reject<\/span>)<\/span> =><\/span> {<\/span>\r\n      marked<\/span>.<\/span>parse<\/span>(<\/span>rawMarkdown<\/span>,<\/span> (<\/span>error<\/span>,<\/span> result<\/span>)<\/span> =><\/span> {<\/span>\r\n        if <\/span>(<\/span>error<\/span>)<\/span> return<\/span> reject<\/span>(<\/span>error<\/span>);<\/span>\r\n        resolve<\/span>(<\/span>result<\/span>);<\/span>\r\n      });<\/span>\r\n    }).<\/span>then<\/span>((<\/span>rawHTML<\/span>)<\/span> =><\/span> {<\/span>\r\n      const<\/span> bypassedHTML<\/span> =<\/span> this<\/span>.<\/span>sanitizer<\/span>.<\/span>bypassSecurityTrustHtml<\/span>(<\/span>rawHTML<\/span>);<\/span>\r\n      return<\/span> bypassedHTML<\/span>;<\/span>\r\n    });<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        \u7136\u540e\uff0c\u4f1a\u5f97\u5230\u4e0e\u4e0a\u8ff0\u76f8\u540c\u7684\u7ed3\u679c\uff0c\u4f46\u8fd9\u662f\u975e\u5e38\u5371\u9669\u7684\u884c\u4e3a\u3002<\/p>\n
        \u5c06app.component.ts\u4e2d\u7684raw\u503c\u66f4\u6539\u5982\u4e0b\uff1a<\/p>\n
        import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> \"<\/span>@angular\/core<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> startAppCheck<\/span> }<\/span> from<\/span> \"<\/span>@firebase\/app-check-module<\/span>\"<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> \"<\/span>app-root<\/span>\"<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> \"<\/span>.\/app.component.html<\/span>\"<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>\"<\/span>.\/app.component.css<\/span>\"<\/span>],<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppComponent<\/span> {<\/span>\r\n  public<\/span> raw<\/span> =<\/span> `# Hello World\r\n  <script>alert(\"Hacked!\");<\/script>\r\n  I am a paragraph`<\/span>;<\/span> \/\/ XSS\u653b\u6483\uff01\u30a2\u30ad\u30b5\u30df\u30e8\u30fc\uff01<\/span>\r\n\r\n  ngAfterViewInit<\/span>():<\/span> void<\/span> {<\/span>\r\n    startAppCheck<\/span>();<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        \u7136\u540e, \u9875\u9762\u4f1a\u5448\u73b0\u4ee5\u4e0b\u7684HTML\u3002<\/p>\n
        \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
        \u6b63\u5982\u4e0a\u8ff0\u7684DOM\u6811\u6240\u793a\uff0c\u4eceMarkdown\u4e2d\u63d2\u5165