我正在写一个Angular应用程序,{{myVal}}我想要显示一个响应.
我怎么做?如果我只是使用绑定语法,innerHTML它会编码所有div字符(当然).
我需要以某种方式将a的内部html绑定{{myVal}}到变量值.
我一直在网上寻找声明性和命令性编程的定义,这将为我提供一些启示.但是,我发现的一些资源中使用的语言令人生畏 - 例如在维基百科上.有没有人有一个现实世界的例子,他们可以告诉我可能会给这个主题带来一些看法(也许在C#中)?
我想动态创建模板.这应该用于ComponentType在运行时构建一个并在托管组件内部放置(甚至替换)它.
直到我使用RC4 ComponentResolver,但RC5我收到消息:
ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.
我发现了这个(官方的angular2)文件
并了解我可以使用其中之一
ngIf用ComponentFactoryResolver.如果我将已知组件传递到托管内部@Component({entryComponents: [comp1, comp2], ...})- 我可以使用.resolveComponentFactory(componentToRender);Compiler...但问题是如何使用它Compiler?上面的注释说我应该打电话:Compiler.compileComponentSync/Async- 那怎么样?
例如.我想为一种设置创建(基于一些配置条件)这种模板
<form>
<string-editor
[propertyName]="'code'"
[entity]="entity"
></string-editor>
<string-editor
[propertyName]="'description'"
[entity]="entity"
></string-editor>
...
Run Code Online (Sandbox Code Playgroud)
在另一种情况下这个(string-editor被替换text-editor)
<form>
<text-editor
[propertyName]="'code'"
[entity]="entity"
></text-editor>
...
Run Code Online (Sandbox Code Playgroud)
等等(editors属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.
该 …
风格如
<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"
Run Code Online (Sandbox Code Playgroud)
不再添加
我将html作为innerHtml传递给我的视图.以下是我的观点
<div [innerHTML]="someHtmlCode"></div>
Run Code Online (Sandbox Code Playgroud)
如果我通过以下代码,它工作正常.
this.someHtmlCode = "<div><b>This is my HTML.</b></div>"
Run Code Online (Sandbox Code Playgroud)
如果我传递下面包含颜色的代码,它就无法正常工作.
this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
Run Code Online (Sandbox Code Playgroud) 我<div [innerHTML]="body"></div>用来将未转义的HTML传递给我的模板,当我传递给body div属性时id,Angular throw:
警告:清理HTML会删除一些内容(请参阅http://g.co/ng/security#xss).警告:清理HTML会删除一些内容(请参阅http://g.co/ng/security#xss).警告:清理HTML会删除一些内容(请参阅http://g.co/ng/security#xss).
那为什么这么说呢?什么可能是危险id的div?可能这个bug?
angular ×5
css ×2
angularjs ×1
c# ×1
compilation ×1
html ×1
javascript ×1
jquery ×1
paradigms ×1
security ×1
typescript ×1
warnings ×1