カスタムヘッダ要素をバインドする

Question

私の問題は、ヘッダを持つと思われるコンポーネント 'action-bar'があることです。しかし、私はまた、h1、h2、h3などを挿入することができる自由を持っていると思っています。バインディングでは、コンポーネントを呼び出すことができ、タイトルセット。

コンポーネント：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'action-bar', 
    templateUrl: 'action-bar.component.html', 
    styleUrls: ['action-bar.component.styl'] 
}) 

export class ActionBarComponent { 

} 

は、テンプレート：

<div class="action-bar"> 
    <ng-content select="[action-bar-title]"> 
    </ng-content> 
</div> 

このように、私のコンポーネントでそれを使用。私はやるだろう

<action-bar> 
    <div action-bar-title> 
<h1>Hi</h1> 
    </div> 
</action-bar> 

しかし、h1をアクションバーコンポーネントにバインドするにはどうすればいいですか？私はh2またはh3を使用することもできます。

また、「a」ヘッダーがある場合は、角度2について間違っていると思いますが、ヘッダーサイズを切り替えるサイズ属性またはクラスが必要です。

まだ学習中です

ありがとうございます。

Answer 1

私はコンポーネントを持っています 'アクションバー'は、ヘッダーを持っているはずです。しかし、私はまた、結合とH1、H2、H3などを挿入することができるという自由を持っていると思いますので、コンポーネントを呼び出すことができ、タイトルはあなたが挿入できるようにするには、innerHTMLテンプレートの構文を使用することができ

を設定しましたいくつかのhtmlタグ。しかし、セキュリティリスクには注意が必要です。ユーザーの入力に使用しないでください。

<div [innerHTML]="actionBarTitle"></div> 

actionBarTitleは、クラスインスタンスのプロパティであり、その値はプログラムによって変更できます。

例Plunker