Question

我试图用Angular2制作一个简单的Markdown内联编辑器。我尝试了几种方法，但似乎都没有效果。我安装了npm标记，现在可以在项目node_modules目录中看到它。我可以导入它，它被netbeans识别。现在，当我使用它没有任何作用，如果我打开firefox debuger然后我发现 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);
  }
}

像这样使用一切正常，除了没有翻译降价。如果我用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。

这个问题也可以帮到你：

How to detect async change to ng-content

Answer 2

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

我提到我的index.html文件中标记了两次以包含我使用npm安装的脚本，并且如果我将其更改为https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js，我将其标记为node_modules/marked/marked.min.js，并且它没有＆＃39;再工作了，我的项目文件出现了奇怪的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在这里给出的答案，但出于某些原因，他们都没有为我工作，或者我没有能力再现它们。我觉得应该有一个打字标记安装标记的地方但我在哪里添加它它不起作用。

Answer 3

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

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

使用Angular2

3 个答案: