我正在写一个Angular应用程序,{{myVal}}我想要显示一个响应.
我怎么做?如果我只是使用绑定语法,innerHTML它会编码所有div字符(当然).
我需要以某种方式将a的内部html绑定{{myVal}}到变量值.
我想动态创建模板.这应该用于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属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.
该 …
我刚刚开始乱用Angular 2,我想知道是否有人能告诉我从元素中动态添加和删除事件监听器的最佳方法.
我有一个组件设置.当单击模板中的某个元素时,我想为mousemove同一模板的另一个元素添加一个监听器.然后,我想在单击第三个元素时删除此侦听器.
我有点使用普通的Javascript来抓取元素,然后调用标准,addEventListener()但我想知道是否有更多的" Angular2.0 "方式,我应该调查.
我想手动编译一些包含HTML的指令.$compileAngular 2中的等价物是什么?
例如,在Angular 1中,我可以动态编译HTML片段并将其附加到DOM:
var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
Run Code Online (Sandbox Code Playgroud) 风格如
<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"
Run Code Online (Sandbox Code Playgroud)
不再添加
我在dummy-data.ts文件中有这个对象.通过服务我成功地把它拉到了app.component.ts.
{name:"Object1",
prop1: {key:'value', key:'value'},
password: "P@ssword1",
htmlText:'<h4>This is THE demo text</h4><p>I want it to display as HTML</p>'
}
Run Code Online (Sandbox Code Playgroud)
目前app.component.ts看起来像这样,开始简单:
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>
<p *ngFor="#plot of plots">
{{plot.personalPanelText.transition}}
</p>
`,
providers: [PlotService]
})
Run Code Online (Sandbox Code Playgroud)
最终结果是字符串而不是HTML.我希望HTML是代码,而不是带HTML标签的文本.
我尝试了几种方法,并在全球网和Angular2文档中搜索,但找不到解决方案.
提前致谢!
我有来自数据库的产品数据包含标题,描述......描述是html格式的字符串,如下所示:
<b>Name:</b> iPhone 5;<br>
<b>Membery:</b> 8GB;<br>
<b>Condition:</b> Brand new;<br />
Run Code Online (Sandbox Code Playgroud)
如果应该显示如下:
名称: iPhone 5;
内存: 8GB;
条件:全新
但是当我在Angular2:{{product.description}}中使用数据绑定时,它显示为纯文本:
<b>Name:</b> iPhone 5; <br /><b>Memory:</b> 8GB;<br /><b>Condition:</b> Brand new;<br />
Run Code Online (Sandbox Code Playgroud)
我应该如何正确显示为html?绑定没有html过滤器.
我有这个功能:
windowInfo_(marker, i, data) {
'<div style="' + this.content_ + '">' +
'<div>' +
'<img [src]="' + "'" + this.image + "'" + '"' + ' style="' + this.image_ + '" alt="avatar">' +
'</div>' +
'<div style="' + this.details_ + '">' +
'<div>' +
'<h5 style="' + this.company_name + '">' + data.company_name + '</h5>' +
'<i class="fa fa-map-marker" id="' + this.country_city + '">' + data.country + ',' + data.city + '</i>' +
'</div>' +
'</div>' +
'</div>' +
'<button class="' …Run Code Online (Sandbox Code Playgroud) angular ×8
typescript ×3
angular6 ×1
compilation ×1
css ×1
ecmascript-6 ×1
html ×1
javascript ×1
templates ×1