拖放组件 return 仅源代码

Question

我想通过拖放来使用自定义表单，用户可以在其中输入字段、select 框、复选框等，并创建自己的表单。

问题是当我在 DRAG 区创建可重用组件并将其带到 DROP 区时我只看到源代码... Here is the working example。尝试从角色移动到列表 1 一些元素。

提前致谢...

Answer 1

在超链接中绑定 URL 时，someValue 将被清理，以便攻击者无法注入，例如javascript: URL 将在 website.You 上执行代码，在注入之前应该首先信任 HTML。你必须为这样的事情使用 DomSanitizer。

export class injectComponent  {

    private _inputdata: string = '<input type="text" name="fname">';

    public get inputdata() : SafeHtml {
       return this._sanitizer.bypassSecurityTrustHtml(this._inputdata);
    }

    constructor(private _sanitizer: DomSanitizer){}
}

并在 html

<div [innerHTML]="inputdata"></div>

我已经在 stackblitz

上编辑了您的示例

拖放组件 return 仅源代码

Drag and drop component return only source code

angular-material

angular-material2

angular