使用Angular2中标记的
发布时间:2020-12-17 06:55:49 所属栏目:安全 来源:网络整理
导读:我正在尝试用Angular2制作一个简单的Markdown内联编辑器.我尝试了几种方法,但似乎都没有效果.我安装了npm标记,现在可以在项目node_modules目录中看到它. 我可以导入它,它被netbeans识别.现在,当我使用它没有任何作用,如果我打开firefox debuger然后我发现 lo
我正在尝试用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的文档都已经过时了. 解决方法
我会这样导入标记的库:
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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |