使用Angular 2

时间:2016-11-06 13:52:48

标签: html css angular typescript angular2-template

我正在尝试创建一个可重用的angular2组件,它接受我的服务器上的html文件的URL数组,并创建一个带有标签的内容窗口,以便在#34;章节之间切换,有效地交换html和css在内容窗口内。我已经尝试了各种各样的事情,包括iframes,但那些不起作用,我可以在StackOverflow上找到的有角度的1 ng包含的解决方法但是它们已经被弃用了,而且我最接近了正在构建一个你可以@Input html的组件,它会插入内容但是样式不会被应用,并且角度会删除任何样式或脚本标签。这是我尝试过的。

在我的父组件类中:

htmlInput: string = "<h1>Why Does Angular make this so hard?</h1>";
cssInput: string = "h1 { color:red; }"

父组件HTML:

<app-html [html]='htmlInput' [css]='cssInput'></app-html>

我的HTML组件:

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

@Component({
    selector: 'app-html',
    template: '<div [innerHtml]=html></div>', //This works but no style
    //template: '{{html}}', //This displays the actual markup on page
    styles: ['{{css}}'] //This does nothing
    //styles: ['h1 { color: red; }']//Also nothing
})
export class HtmlComponent implements OnInit {
    @Input() html: string = "";
    @Input() css: string = "";
    ngOnInit() {

    }
}

此代码的结果是

为什么Angular会如此努力?

但没有红色。也许在将innerHtml添加到DOM之前应用了样式?我不知道,只是将{{html}}结果显示实际标记,并显示h1标记。

我想这样做的原因是我已经创建了一堆HTML页面,这些HTML页面已经创建,位于我的服务器上的一个文件夹中,然后我将我的网站分成了一个单独的样式表。我希望能够像书中的页面一样翻阅它们而无需重新加载页面,因为有这么多,我可能会一直添加更多,我真的很喜欢不为每一个创建路由。 (我已经有基本网站导航的路由。)

对于如何在最新版本的Angular 2中动态地将样式化HTML嵌入页面,有没有人有更好的建议?在本文发表时,我们处于2.0.0-beta.17。

或者......我已经认为我可能会从完全错误的角度接近这个问题。必须有一个原因,Angular正在努力使这一切变得如此困难,并且贬低了人们提出的所有解决方案。如果有人建议如何以更有棱角的方式取得同样的结果,我很乐意听到这一点。太

谢谢。

编辑:

我能够通过创建一个管道来修复我的问题,该管道在将html添加到iframe之前对其进行散打。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

然后你可以将你的html传递给iframe。

<iframe width="100%" height="1000" frameBorder="0" [src]="url | safe"></iframe>

这对我很有用,因为我有一些使用各种jquery和样式等的旧页面。这可以快速修复它们。

2 个答案:

答案 0 :(得分:2)

Angular2通过将动态添加的属性(如_ngcontent-yle-18)包含到CSS选择器中来重写添加到组件的样式。

Angular2使用它来模拟shadow DOM样式封装。这些属性不会添加到动态添加的HTML中(例如,使用innerHTML)。

变通方法

  • index.html添加样式,因为Angular2不会重写这些样式

  • 设置ViewEncapsulation.None因为然后Angular没有添加封装模拟属性

  • 使用/deep /使Angular2忽略封装模拟属性

另见Angular 2 - innerHTML styling

答案 1 :(得分:0)

您应该将css包装到一个对象中,并使用ngStyle将其绑定到您的组件而不是styles属性,因为styles不支持数据绑定。

示例:

htmlInput: string = "<h1>Why Does Angular make this so hard?</h1>";
cssInput: string = "{h1 { color:red; }}"

父组件HTML:

<app-html [html]='htmlInput' [css]='cssInput'></app-html>

您的HTML组件:

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

@Component({
    selector: 'app-html',
    template: '<div [innerHtml]="html" [ngStyle]="css"></div>',
    styles: []
})
export class HtmlComponent implements OnInit {
    @Input() html: string = "";
    @Input() css: string = "";
    ngOnInit() {

    }
}