双向绑定

Posted 2020-12-20 dingdc

<div>
    <button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
    <button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

import { Component, EventEmitter, Input, OnInit, Output } from ‘@angular/core‘;

@Component({
  selector: ‘app-sizer‘,
  templateUrl: ‘./sizer.component.html‘,
  styleUrls: [‘./sizer.component.scss‘]
})
export class SizerComponent implements OnInit {
  @Input() size = 16;
  @Output() sizeChange = new EventEmitter<Number>()
  constructor() { }

  ngOnInit(): void {
  }

  dec() { 
    // this.size-- ;
    this.sizeChange.emit(this.size - 1)
  }
  inc() { 
    // this.size++; 
    this.sizeChange.emit(this.size + 1)
  }

}

<!-- <app-sizer [size] = "size" (change)="size = $event"></app-sizer> -->
<!-- <app-sizer [(size)] = "size"></app-sizer>
<p><label [style.font-size.px]="size">FontSize: {{size}}px</label></p> -->

import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.scss‘]
})
export class AppComponent {
  size = 16;
  title = ‘ngone‘;
  con = "OK";
  
 
}