Использовать отмеченные в Angular2
Я пытаюсь сделать простой встроенный редактор Markdown с Angular2. Я пробовал несколько подходов, но ни один из них не работает. Я установил помеченный с помощью 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);
}
}
используется, как это все работает нормально, за исключением того, что уценка не переводится. Если я раскомментирую все строки с 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 или чего-то еще, любой источник информации, объясняющий эти концепции, приветствуется. Я много читал в интернете, но кажется, что все документы об Angular2 довольно быстро устарели.
3 ответа
Мне наконец удалось решить мою проблему.
Я упоминал отмеченный в моем файле 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"
}
}
Я нашел много похожих вопросов и попробовал все их ответы, а также ответ, который дал здесь Тьерри Темплиер, но по какой-то причине никто из них не работал на меня, или я не был в состоянии воспроизвести их. Я чувствую, что должна быть установка машинописного текста с пометкой кое-где, но куда бы я ни добавлял, это не работает.
Я бы импортировал отмеченную библиотеку следующим образом:
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);
}
}
Смотрите этот план: https://plnkr.co/edit/zUstS3T7IJxjQUVCXiAM?p=preview.
Этот вопрос также может помочь вам:
Этот проект предоставляет некоторые директивы для использования Markdown с Angular 2. И он также использует библиотеку Marked.