在 Angular2 中使用标记

Question

我正在尝试使用 Angular2 制作一个简单的 Markdown 内联编辑器。我尝试了几种方法，但 none 似乎有效。我安装时标有 npm，它现在在项目 node_modules 目录中可见。我可以导入它，它被 netbeans 识别。现在，当我使用它时，没有任何效果，如果我打开 firefox 调试器，我会发现 localhost:3000/标记为未找到。

我把降价转换器放在了一个服务中。看起来如下：

import { Injectable } from 'angular2/core';

import * as marked from 'marked';

interface IMarkdownConfig {
  sanitize?: boolean,
  gfm?: boolean,
  breaks?: boolean,
  smartypants?: boolean
}

@Injectable()
export class MarkdownService {
  //private md: MarkedStatic;

  constructor() {
    //this.md = marked.setOptions({});
  }

  setConfig(config: IMarkdownConfig) {
   // this.md = marked.setOptions(config);
  }

  convert(markdown: string): string {
    if(!markdown) {
      return '';
    }
    return markdown;
    //return this.md.parse(markdown);
  }
}

像这样使用一切正常，除了未翻译 markdown。如果我用 md 取消注释所有行，它就会停止工作。我正在使用它的组件如下所示：

import {Component, Input, OnInit } from 'angular2/core';
import {RouteParams} from 'angular2/router';

import {MarkdownService}  from '../services/markdown-converter' 


@Component({
  selector: 'my-story',
  templateUrl: 'app/components/story.html',
  bindings: [MarkdownService]
})
export class StoryComponent implements OnInit {
    public html: string;
    private md: MarkdownService;

    constructor(
         private _routeParams: RouteParams, private _converter: MarkdownService) {
         this.html ='';
         this.md = _converter;
    }

    ngOnInit() {
    }

    public updateValue(val:string) {
        if(!val) { return ''; }
        this.html = val;
    }
}

我没有显示所有涉及的文件，但如果有我应该提供的文件，请在评论中询问。如果我对 Typescript 和/或 Angular2 注入或其他任何东西没有理解正确，欢迎任何解释这些概念的信息资源。我在 www 上看了很多，但似乎所有关于 Angular2 的文档都很快过时了。

Answer 1

我会这样导入标记的库：

import marked from 'marked';

并像你一样使用它：

@Component({
  selector: 'markdown', 
  template: `
    <div [innerHTML]="convertedData">
    </div>
  `
})
export class MarkdownComponent {
  @Input('data')
  data:string;

  ngOnChanges() { 
    var md = marked.setOptions({});
    this.convertedData = md.parse(this.data);
  }
}

看到这个 plunkr：https://plnkr.co/edit/zUstS3T7IJxjQUVCXiAM?p=preview。

这个问题也可以帮到你：

Answer 2

我终于设法解决了我的问题。

我在我的 index.html 文件中提到了两次标记，一次是为了包含我用 npm 安装的脚本，一旦我将标记的名称映射到 https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js，如果我将其更改为 node_modules/marked/marked.min.js不再工作，我的项目文件出现奇怪的 GET 404 错误。

然后我在 typings.json 和 tsconfig.json 中标记了一些条目，这些条目在某些网站上有建议。我删除了那些。最后，我在 package.json 文件中留下了 "marked": "^0.3.5" 条目。这就是我的 index.html 的样子：

<!DOCTYPE html>
<html>
  <head>
    <base href="/"/>
    <title>SSE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/marked/marked.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        },
        map: {
          marked: 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading... </my-app>
  </body>
</html>

这是我的 package.json:

{
  "name": "sse",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "es6-shim": "^0.35.0",
    "marked": "^0.3.5",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.26",
    "zone.js": "0.6.10"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^0.7.12"
  }
}

我发现了很多类似的问题，并尝试了他们所有的答案以及 Thierry Templier 在这里给出的答案，但出于某种原因 none 其中有一些是为我工作的，或者我无法复制他们。我觉得应该在某些地方安装打字稿，但无论我在哪里添加它，它都不起作用。

Answer 3

该项目提供了一些使用 Markdown 和 Angular 2 的指令。它还使用了 Marked 库。

https://github.com/dimpu/angular2-markdown

在 Angular2 中使用标记

use marked in Angular2

javascript-marked

angular