angular2 自定义标题组件

前端之家收集整理的这篇文章主要介绍了angular2 自定义标题组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果

import {Component,Input,OnInit} from "@angular/core";


const css = require('./horizontal.component.css');
@Component({
    selector: 'custom-div-title',templateUrl: './horizontal.component.html',styles: [
        css
    ]

})

export class CustomDivTitleComponent {

    @Input()
    title: string = '默认标题';
    @Input('title') set changeTitle(val: any) {
        this.title = val;
    }


}
<div class="row custom-div-title">
    <div class="col-xs-3">
        <span>{{ title }}</span>
    </div>
</div>
.custom-div-title {
    border-top: 5px solid #36a9e1;
    margin: 10px auto;
}

.custom-div-title > div {
    background-color: #36a9e1;
    color: whitesmoke;
    font-size: 20px;
    font-family: "Microsoft YaHei UI";
    text-align: left;
}
原文链接:https://www.f2er.com/angularjs/148681.html

猜你在找的Angularjs相关文章