Question

我有一个组件html模板：

<figure class="{{imgClass}}">
    <img src="{{imgUrl}}" class="img-responsive">
    <figcaption>
        {{legende}}
    </figcaption>
</figure>

和一个组件ts：

import {Component, Input, OnInit} from "@angular/core";

@Component({
    selector: 'picture',
    templateUrl: 'image.component.html',
    styleUrls: ['image.component.sass']
})
export class ImageComponent implements OnInit {

    @Input() name: string;
    @Input() container: string;
    @Input() legende: string;
    @Input() imgClass: string; //left or right for instance
    imgUrl: string;

    constructor() {}

    ngOnInit() {
        this.imgUrl = "http://.../api/containers/" + this.container + "/download/" + this.name;
    }

}

我刚刚删除了安全性的API地址（...），但你确实明白了。我们的想法是拥有一个从API加载图像的组件，并添加一个标题和类。从应用程序中其他位置的html文件调用我的组件可以使用，例如：

<picture name="test.jpg" container="test" legende="This is a caption..." imgClass="left"></picture>

到目前为止，没问题，组件才能正确呈现。

现在，我有一些使用 Markdown Parser （标记为）加载的代码。为了避免Angular 2清理，我使用了一种方法：Sanitize input in Angular2。这是一个示例：

## This is a title
This is a sample paragraph

<picture name="img_bg_apidae5.png" container="test" legende="Ceci est une légende" imgClass="left"></picture>

This is another paragraph.

Marked将代码翻译为：

<h2>This is a title</h2>
<p>This is a sample paragraph</p>
<picture name="img_bg_apidae5.png" container="test" legende="Ceci est une légende" imgClass="left"></picture>
<p>This is another paragraph.</p>

Angular不呈现该组件。顺便说一句，如果我创建一个没有任何参数的组件，它也不起作用。知道我该怎么办吗？

在解析的markdown代码

0 个答案: