綁定自定義頭元素

我的問題是，我有一個組件的'行動吧'，應該有一個頭。但我也想有能力插入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。

或者是我對於角度2錯誤的心態，應該只有'a'標題，那麼可能是一個尺寸屬性或類來切換標題大小。

我還在學習

謝謝。

來源

2016-11-13 Zaixu

你是什麼意思'如何將我讓H1可綁定到動作欄組件？'？ – yurzui

所以我可以在組件上做一個函數，它會改變h1，h2，h3的內容（以放入的爲準） – Zaixu

我有一個組件的'行動吧'，應該有一個頭。但我也想有能夠插入H1，H2，H3等有了約束力的自由，所以該組件可以被稱爲和標題設置

你可以使用innerHTML模板語法，讓您可以插入一些html標籤。但要小心其涉及的安全風險，不應將其用於用戶輸入。

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

actionBarTitle是您的類實例屬性，其值可以通過編程方式更改。

例Plunker

來源

2016-11-13 13:01:30 Michael

綁定自定義頭元素

回答

相關問題