web-dev-qa-db-ja.com

Angular 2 - innerHTMLスタイル

HTTP呼び出しから大量のHTMLコードを取得しています。 HTMLブロックを変数に入れて[innerHTML]を使って自分のページに挿入しましたが、挿入したHTMLブロックをスタイルすることはできません。どのように私はこれを達成する可能性があります誰かが何か提案がありますか？

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

私がスタイルしたいHTMLは、変数 "calendar"に含まれているブロックです。

angularinnerhtml
133
Jakob Svenningsson

update 2 ::slotted

::slottedは現在、すべての新しいブラウザでサポートされており、 `ViewEncapsulation.ShadowDomで使用できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

update 1 :: ng-deep

/deep/は非推奨になり、::ng-deepに置き換えられました。

::ng-deepもすでに非推奨とマークされていますが、それに代わるものはまだありません。

ViewEncapsulation.Nativeがすべてのブラウザで適切にサポートされていて、シャドウDOMの境界を越えたスタイリングをサポートしている場合、::ng-deepはおそらく廃止されるでしょう。

オリジナル

Angularは、DOMに追加するHTMLにあらゆる種類のCSSクラスを追加して、シャドウDOM CSSのカプセル化をエミュレートし、コンポーネントへの出入りのスタイルを防止します。 Angularは、追加したCSSをこれらの追加クラスに合わせて書き換えます。 [innerHTML]を使用して追加されたHTMLの場合、これらのクラスは追加されず、書き換えられたCSSは一致しません。

回避策として試してください

  • コンポーネントに追加されたCSSの
/* :Host /deep/ mySelector { */
:Host ::ng-deep mySelector { 
  background-color: blue;
}
  • cSSのindex.htmlに追加
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>>（および同等の/deep/だが/deep/はSASSでよりうまく機能する）および::shadowは2.0.0-beta.10で追加された。これらはshadow DOM CSSコンビネータ（非推奨）と似ており、Angular 2のデフォルトであるencapsulation: ViewEncapsulation.Emulatedでのみ動作します。おそらくViewEncapsulation.Noneでも動作しますが、必要ないので無視されるだけです。クロスコンポーネントスタイリングのためのより高度な機能がサポートされるまで、これらのコンビネータは中間的な解決策にすぎません。

もう一つのアプローチは使うことです

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

cSSをブロックするすべてのコンポーネントの場合（CSSを追加する場所とスタイルを設定するHTMLの場所によって異なります。アプリケーションのすべてコンポーネントになる可能性があります）

更新

例プランカー

263
Günter Zöchbauer

Angularコンポーネント内に動的に追加されたHTML要素のスタイルを設定しようとしている場合、これは役に立ちます。

// inside component class...

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

この属性の規約はAngularのバージョン間で安定しているとは保証されていないので、Angularの新しいバージョンにアップグレードするときにこのソリューションで問題が発生する可能性があります。そのような場合はおそらく簡単なことでしょう）。

0
Trevor