typescript 重用能够组分

Posted 2021-05-21

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

@Component({
    selector: "reuse-able-component",
    template: `
        <!-- Main component for a primary marketing message or call to action -->
        <div class="jumbotron">
            <h1>{{ title.title }}</h1>
            <p>{{ title.description }}</p>
            
            <i class="glyphicon"
                [class.glyphicon-star-empty]="!isFavorite"
                [class.glyphicon-star]="isFavorite"
                (click)="onclick()">
            </i>
                

        </div>
        `
})

export class ReUseAbleComponent {
    @Input() isFavorite = false;

    onclick() {
        this.isFavorite = !this.isFavorite
    }    

    // Tilte and description of component

    title = {
        title: "Re-Use-Able Component",
        description: "Reuseable component in angular 2. Click on star to see changes. And if you want to see reuse of this component then click on two way binding on menu"
    }

}