加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

使用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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读