@Input,@Output

@Input,@Output 之模态框组件

使用的是bootstrap样式

app.components.html

<!-- Button trigger modal -->
<button type="button" class="btn-primary" (click)="showModal=true">
  Launch demo modal
</button>

<app-dialog 
[show]="showModal" 
[title]="'标题'" 
(confirm)="onConfirm()"
(close)="onClose()"
(backdropClick)="onClose()">
</app-dialog>

app.components.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'hero';
  showModal = false;
  onConfirm() {
    console.log('接收 onConfirm');
  }
  onClose() {
    this.showModal = false;
  }
}

dialog.components.html

  <!-- Modal -->
  <div class="modal fade show black-back" (click)="backdropClick.emit()" [class.d-block]="show"  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" (click)="$event.stopPropagation()">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
          <button type="button" (click)="onClose()" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" >&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button"  (click)="onClose()" class="btn btn-secondary" data-dismiss="modal">{{cancelLabel}}</button>
          <button type="button" class="btn btn-primary" (click)=onConfirm()>{{confirmLable}}</button>
        </div>
      </div>
    </div>
  </div>

dialog.componen.ts

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

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
  @Input() show = false;
  @Input() title = '';
  @Input() confirmLable = "确定";
  @Input() cancelLabel = "取消";

  @Output() close = new EventEmitter<void>();
  @Output() backdropClick = new EventEmitter<void>();
  @Output() confirm = new EventEmitter<void>();

  constructor() { }

  ngOnInit(): void {
  }

  onClose(){ 
    // this.show = false;
    this.close.emit()
    console.log("发射成功1");
  }

  onConfirm(){ 
    // this.show = false;
    this.confirm.emit()
    console.log("发射成功2");
  }

  // backdropClick(){
  //   console.log("遮罩")
  // }
}

基本双向绑定

sizer.components.html

<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>

sizer.components.ts

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.components.html

<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> 

app.components.ts

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

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

  title = 'ngone';
  showModal = false;
  con = "OK";
  onClose(){
    console.log("close")
    this.showModal = false;
  }
  onConfirm(){
    console.log(' 接收 onConfirm')
  }
}