使用方式

子组件

  1. 属性定义:
    要启用双向数据绑定,您需要在子组件添加对应于该属性的@Output(),并带有“Change”后缀
    1. @Input() getVisible: boolean;
    2. @Output() getVisibleChange = new EventEmitter<boolean>();
  2. 变更通知:
    如果要将对属性所做的更改发布到父级,则需要通过以下方式通知父级:
    1. this.getVisibleChange.emit(newValue)

父组件

双向绑定方式:

  1. [(getVisible)]="getVisible"

手动回调方式:

  1. [getVisible]="myBoundProperty" (getVisibleChange)="myCallback($event)"

示例场景:

  • 父组件触发 弹出框
  • 弹出框的内容为子组件
  • 子组件 提交表单后,触发父组件属性更改,关闭弹出框

子组件

HTML

  1. <button (click)="hide()">test</button>

TS

双向绑定

  • @Input() getVisible
  • @Output() getVisibleChange,注意比Input的变量名称多了个固定字符串“Change”
  1. import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
  2. @Component({
  3. selector: 'app-svg-demo1',
  4. templateUrl: './svg-demo1.component.html',
  5. styleUrls: ['./svg-demo1.component.less']
  6. })
  7. export class SvgDemo1Component implements OnInit {
  8. @Input() getVisible: boolean;
  9. @Output() getVisibleChange = new EventEmitter<boolean>();
  10. constructor() {
  11. }
  12. ngOnInit() {
  13. }
  14. hide() {
  15. this.getVisible = false;
  16. this.getVisibleChange.emit(this.getVisible);
  17. console.log('hide', this.getVisible);
  18. }
  19. }

父组件

HTML

  1. <button nz-button nzType="primary" (click)="showModal()">
  2. <span>添加APP</span>
  3. </button>
  4. <nz-modal [(nzVisible)]="getVisibles" [nzOkLoading]="isOkLoading"
  5. (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  6. nzTitle="Modal Title"
  7. >
  8. <app-svg-demo1 [(getVisible)]="getVisible"></app-svg-demo1>
  9. <app-svg-demo1 [getVisible]="getVisible" (getVisibleChange)="myCallback($event)"></app-svg-demo1>
  10. </nz-modal>

TS

  1. import {Component, OnInit} from '@angular/core';
  2. import {BizAppService} from '../biz-app/biz-app.service';
  3. import {Storage, StorageService} from '../storage/storage.service';
  4. import {ZenContext} from '../../zen-chart/zen-context.model';
  5. import {Lineage} from '../lineage/lineage.model';
  6. import {ZenDemo} from '../../zen-chart/zen-demo.model';
  7. import {BizApp} from '../biz-app/biz-app.model';
  8. @Component({
  9. selector: 'app-data-index',
  10. templateUrl: './data-index.component.html',
  11. styleUrls: ['./data-index.component.less']
  12. })
  13. export class DataIndexComponent implements OnInit {
  14. app: number;
  15. apps: BizApp[];
  16. zenContext = new ZenContext();
  17. getVisible: boolean;
  18. isOkLoading = false;
  19. constructor(private appService: BizAppService,
  20. private storageService: StorageService) {
  21. }
  22. ngOnInit() {
  23. this.appService.getAll().subscribe(data => {
  24. console.log('appService', data);
  25. this.apps = data;
  26. if (this.apps) {
  27. this.app = this.apps[0].id;
  28. }
  29. }
  30. );
  31. // TEST
  32. ZenDemo.storages.forEach(storage => {
  33. console.log('storage', storage);
  34. this.zenContext.addNode(storage.id, storage.name, storage.stage);
  35. });
  36. ZenDemo.lines.forEach(line => {
  37. this.zenContext.addLine(line.fromNodes, line.distNode);
  38. });
  39. }
  40. showModal(): void {
  41. this.getVisible = true;
  42. }
  43. handleOk(): void {
  44. this.isOkLoading = true;
  45. setTimeout(() => {
  46. this.getVisible = false;
  47. this.isOkLoading = false;
  48. }, 3000);
  49. }
  50. handleCancel(): void {
  51. this.getVisible = false;
  52. }
  53. toggleApp(id: number): void {
  54. console.log('click toggle app');
  55. this.zenContext.clean();
  56. this.storageService.getByAppId(id).subscribe(data => {
  57. console.log(data);
  58. this.addStorages(data);
  59. });
  60. }
  61. isOtherStage(stage: string): boolean {
  62. const stages: Array<string> = ['source', 'etl', ''];
  63. return stages.findIndex(item => item === stage) < 0;
  64. }
  65. addLinage(lines: Lineage[]): void {
  66. if (!lines) {
  67. return;
  68. }
  69. lines.forEach(line => this.zenContext.addLine(line.fromNodes, line.distNode));
  70. }
  71. addStorages(storages: Storage[]): void {
  72. if (!storages) {
  73. return;
  74. }
  75. storages.forEach(storage =>
  76. this.zenContext.addNode(storage.id, storage.name, storage.stage));
  77. }
  78. myCallback(event): void {
  79. console.log('myCrazyCallback', event);
  80. this.getVisible = event;
  81. }
  82. }
文档更新时间: 2019-09-12 10:55   作者:admin