Постановка задачи проектирования компонентов в angular 2.0 и выше

Question

Постановка проблемы - два элемента управления вводом отображаются на одной странице, и оба элемента управления вводом принадлежат отдельному компоненту. Когда мы помещаем значение в первое текстовое поле ввода, его вычисляют квадратное значение и отображают во втором элементе управления вводом, наоборот, если изменить значение во втором текстовом поле, его вычисляют квадратное значение и обновляют до первого текстового элемента управления. Как я могу спроектировать структуру компонентов для достижения требования в Angular 8?

Answer 1

Здесь мы сначала понимаем проблему реализации, затем go в части решения-

Задача

Сначала, если вы измените значение из первого элемента управления текстовое поле выполнит хук жизненного цикла ngOnChange () и вычислит квадратное значение и обновит до второго текстового поля, но как только вы обновите значение до второго текстового поля, он снова вызовет ngOnChange (), снова изменит вызов и обновит значение до первого В текстовом поле это событие продолжает вызывать бесконечное время.

Решение

Создание структуры дизайна компонента

child.component. html

<input type="text" name="name1" id="txtName2" [(ngModel)]="childText" (change)="valuechange2($event.target.value)" />

child.component.ts

import { Component, Input, OnChanges, SimpleChange, SimpleChanges, Output, EventEmitter } from '@angular/core';

    @Component({
        selector: 'child-component',
        templateUrl: './child.component.html'
    })
    export class ChildComponent implements OnChanges {
        @Input() childText: number;
        @Output() text2Change: EventEmitter<number> = new EventEmitter<number>();
        constructor() { }
        ngOnChanges(changes: SimpleChanges) {
            let currentVal = changes.childText.currentValue;
            let previousVal = changes.childText.previousValue;
            if (currentVal != previousVal) {
                this.childText = currentVal * currentVal;
            }
        }
        valuechange2(val: number) {
            this.text2Change.emit(val);
        }
    }

Child2.component. html

<input type="text" name="name1" id="txtName3" [(ngModel)]="childText" (change)="valuechange2($event.target.value)" />

Child2.component.ts

import { Component, Input, OnChanges, SimpleChange, SimpleChanges, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'child1-component',
    templateUrl: './child1.component.html'
})
export class Child1Component implements OnChanges {
    @Input() childText: number;
    @Output() text2Change: EventEmitter<number> = new EventEmitter<number>();

    constructor() { }
    ngOnChanges(changes: SimpleChanges) {
        let currentVal = changes.childText.currentValue;
        let previousVal = changes.childText.previousValue;
        if (currentVal != previousVal) {
            this.childText = currentVal * currentVal;
        }
    }
    valuechange2(val: number) {
        this.text2Change.emit(val);
    }
}

Родительский компонент

app.component. html

<child-component [childText]="text1" (text2Change)="childChange($event)"></child-component>
<child1-component [childText]="text2" (text2Change)="child1Change($event)"></child1-component>

app.component.ts

 import { Component, OnChanges, SimpleChanges, OnInit } from '@angular/core';
    import { of, merge } from 'rxjs';
    import { mergeMap, delay } from 'rxjs/operators';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnChanges, OnInit, OnChanges {
      title = 'my-app';

      text1: number;
      text2: number;

      ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
      }

      childChange(child: number) {
        this.text2 = child;
      }
      child1Change(child: number) {
        this.text1 = child;
      }
    }

Answer 2

Просто используйте ngmodal и рассчитайте значения в файле TS. NgModal поможет вам перенести значения из HTML в ts и наоборот