Question

我的问题是，我有一个组件＆＃39; action-bar＆＃39;这应该有一个标题。但我也希望能够自由插入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的思维方式是错误的，如果只是有一个＆＃39; a＆＃39;标题，然后可能是一个大小属性或类来切换标题大小。

我还在学习

谢谢。

Answer 1

我有一个组件'action-bar'应该有一个标题。但我也希望能够自由插入h1，h2，h3等。通过绑定，可以调用组件和标题集

您可以使用innerHTML模板语法，因此您可以插入一些html标记。但要注意其涉及的安全风险，不应将其用于用户输入。

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

actionBarTitle是您的类实例属性，其值可以通过编程方式进行更改。

示例Plunker

绑定自定义标头元素

1 个答案: