8

我正在尝试使用 Angular2 制作一个简单的 Markdown 内联编辑器。我尝试了几种方法，但似乎都没有。我安装了用 npm 标记的，现在它在项目 node_modules 目录中可见。我可以导入它并且它被netbeans识别。现在，当我使用它时，什么都不起作用，如果我打开 firefox 调试器，我会发现 localhost:3000/marked not found。

我将降价转换器放在服务中。看起来如下：

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);
  }
}

像这样使用一切正常，除了没有翻译降价。如果我用 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 的文档都很快过时了。

4

3 回答 3

16

我会以这种方式导入标记的库：

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 。

这个问题也可以帮助你：

于 2016-04-19T21:02:54.517 回答
1

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

我在我的 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一些网站上建议的地方标记了一些条目。我删除了那些。最后，我将"marked": "^0.3.5"条目留在了我的package.json文件中。这就是我的 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 在这里给出的答案，但由于某种原因，它们都不适合我，或者我无法复制它们。我觉得应该有一个 typescript install 标记了 some where 但是我在哪里添加它不起作用。

于 2016-04-21T09:09:33.093 回答
1

这个项目提供了一些在 Angular 2 中使用 Markdown 的指令。它也使用了 Marked 库。

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

于 2017-03-20T08:33:39.253 回答