使用在Angular2中标记的 [英] use marked in Angular2
问题描述
我正在尝试使用Angular2创建一个简单的Markdown内联编辑器.我尝试了几种方法，但似乎都没有用.我安装了标记为npm的文件，现在在项目node_modules目录中可见该文件. 我可以导入它，并且netbeans可以识别它.现在，无论何时我使用它都无济于事，如果我打开firefox调试器，我会发现 本地主机:3000/未标记.
I'm trying to make a simple Markdown inline editor with Angular2. I tryed several approaches but none seems to work. I installed marked with npm and it is now visible in the projects node_modules directory. I can import it and it is recognized by netbeans. Now when ever I use it nothing works and if I open the firefox debuger then i find localhost:3000/marked not found.
我将降价转换器投入了服务.看起来如下:
I put the markdown converter in a service. Which looks the following:
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取消注释所有行，它将停止工作.我正在使用的组件看起来像这样:
used like this everything works fine, except that markdown is not translated. If I uncomment all lines with md it stops working. The component in which I'm using it looks like that:
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的所有文档似乎都已经过时了.
I'm not displaying all the involved files but If there is a file I should provide just ask in the comments. If it is something I didn't get right about Typescript and or Angular2 injection or whatever, any resource of information explaining those concepts is welcome. I have read a lot on the www but it seems that all documents about Angular2 are quite fast outdated.
推荐答案
我终于设法解决了我的问题.
I finally managed to solve my problem.
我曾经两次在index.html文件中提到标记一次，以包括我在npm中安装的脚本，并且一旦我将标记为https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js的名称映射到node_modules/marked/marked.min.js，它将不再起作用，我得到了我的项目文件出现奇怪的GET 404错误.
I mentioned marked in my index.html file twice once to include the script I installed with npm and once I maped the name marked to https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js if I change this to node_modules/marked/marked.min.js it doesn't work anymore and I get strange GET 404 errors for my project files.
然后我在typings.json和tsconfig.json中标记了一些条目，在某些网站上有建议.我删除了那些.最后，我在package.json文件中保留了"marked": "^0.3.5"条目.这就是我的index.html的样子:
Then I had some entrys for marked in my typings.json and tsconfig.json which where suggested on some sites. I removed those. Finally I left the "marked": "^0.3.5" entry in my package.json file. This is how my index.html looks like:
<!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:
and this is my 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在这里给出的答案，但是由于某种原因，这些问题都没有为我工作，或者我无法复制它们.我觉得应该在某个地方标记一个打字稿安装，但是无论我在哪里添加它都行不通.
I found a lot of similar questions and tryed all their answers as well as the one given by Thierry Templier here but for some reason none of them where working for me, or I was not capable of reproducing them. I feel like there should be a typescript install of marked some where but where ever I add it it doesn't work.
这篇关于使用在Angular2中标记的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
