相关疑难解决方法(0)

Angular HTML绑定

我正在写一个Angular应用程序,{{myVal}}我想要显示一个响应.

我怎么做?如果我只是使用绑定语法,innerHTML它会编码所有div字符(当然).

我需要以某种方式将a的内部html绑定{{myVal}}到变量值.

angular2-template angular2-databinding angular

756
推荐指数
11
解决办法
46万
查看次数

如何使用/创建动态模板来使用Angular 2.0编译动态组件?

我想动态创建模板.这应该用于ComponentType运行时构建一个并在托管组件内部放置(甚至替换)它.

直到我使用RC4 ComponentResolver,但RC5我收到消息:

ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.

我发现了这个(官方的angular2)文件

Angular 2同步动态组件创建

并了解我可以使用其中之一

  • 一种动态的ngIfComponentFactoryResolver.如果我将已知组件传递到托管内部@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属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.

该 …

compilation typescript angular2-compiler angular

185
推荐指数
10
解决办法
13万
查看次数

动态添加事件侦听器

我刚刚开始乱用Angular 2,我想知道是否有人能告诉我从元素中动态添加和删除事件监听器的最佳方法.

我有一个组件设置.当单击模板中的某个元素时,我想为mousemove同一模板的另一个元素添加一个监听器.然后,我想在单击第三个元素时删除此侦听器.

我有点使用普通的Javascript来抓取元素,然后调用标准,addEventListener()但我想知道是否有更多的" Angular2.0 "方式,我应该调查.

angular

134
推荐指数
3
解决办法
13万
查看次数

在Angular 2中等效$ compile

我想手动编译一些包含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)

version-compatibility typescript angular2-compiler angular

127
推荐指数
4
解决办法
6万
查看次数

在RC.1中,使用绑定语法无法添加某些样式

风格如

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"
Run Code Online (Sandbox Code Playgroud)

不再添加

css angular

68
推荐指数
1
解决办法
5万
查看次数

如何在我的模板(Angular2/TypeScript)中将HTML字符串转换为HTML?

我在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文档中搜索,但找不到解决方案.

提前致谢!

javascript templates typescript ecmascript-6 angular

5
推荐指数
1
解决办法
1万
查看次数

Angular2:如何在angular2数据绑定中以html格式显示数据?

我有来自数据库的产品数据包含标题,描述......描述是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过滤器.

angular

4
推荐指数
1
解决办法
7172
查看次数

单击模板Angular 6中的按钮

我有这个功能:

 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)

html angular angular6

0
推荐指数
1
解决办法
176
查看次数