Связанный пользовательский элемент заголовка

Question

Моя проблема заключается в том, что у меня есть компонентная панель действий, которая должна иметь заголовок. Но я также хотел бы иметь возможность вставлять 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 с компонентом action-bar? так что я могу даже использовать h2 или h3.

Или мое мышление о неправильном угловом 2, должно ли быть только заголовок «a», а может быть, атрибут размера или класс для переключения размера заголовка.

Im still learning

С благодарностью.

Answer 1

У меня есть компонентный бар, который должен иметь заголовок. Но я также хотел бы иметь свободу, чтобы быть в состоянии вставить h1, h2, h3 и т.д. С обязательным, поэтому компонент можно назвать и название набора

Вы можете использовать innerHTML синтаксис шаблонов, так что вы можете вставить некоторые html-теги. Но будьте осторожны с его угрозой безопасности, не следует использовать его для ввода пользователем.

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

actionBarTitle Ваш класс экземпляры свойство и его значение может быть изменить программно.

Пример Plunker