Как использовать одну и ту же функцию в разных угловых компонентах - PullRequest
Новая
       22

Как использовать одну и ту же функцию в разных угловых компонентах

0 голосов
/ 31 октября 2019

У меня есть Компонент A, у которого есть набор из 2 функций и 2 атрибутов класса, которые также должен использовать другой компонент B. Ранее я просто копирую и вставляю эти части кода в компонент B и использую его. Но я уверен, что делать какой-то избыточный код ненормально.

РЕДАКТИРОВАТЬ: На самом деле у меня есть компонент «добавить элемент» со сложными формами и второй «изменить элемент», и я хочу использоватьодин и тот же скелет для этих двух компонентов.

Кто-нибудь знает способ добиться этого в Angular 8? Заранее спасибо,

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

я использовал тот же сценарий моего приложения. Я хочу создать динамический компонент адреса. для многих форм. поэтому сначала я создаю общий компонент 

import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';
import { AddressModal } from '../../modals/opportunity.modal';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css'],
})
export class AddressComponent implements OnInit, AfterViewInit {

  form_address: FormGroup;
  @Input('addressModal') addressModal: AddressModal;

  @Output()
  private formReady: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

  listCountry = [];
  public formSubmitAttempt: boolean = false;

  constructor(private fb: FormBuilder) {
    this.getCountryList();
    this.createForm();
  }

  ngOnInit(): void {
    this.formReady.emit(this.form_address);
    if (this.addressModal && this.addressModal !== undefined) {
      setTimeout(function () {
        this.form_address.setValue(this.addressModal);
      }.bind(this), 500);

    }
  }

  ngAfterViewInit(): void {


  }
  createForm() {
    const requiredValidations = [
      Validators.required,
      this.conf.noWhitespaceValidator,
    ];

    this.form_address = this.fb.group({
      id: [''],
      row_id: [''],
      opportunity_id: [''],
      address1: ['', requiredValidations],
      address2: [''],
      city: ['', requiredValidations],
      state: ['', requiredValidations],
      zipcode: ['', requiredValidations],
      country: ['S1ptmVWUWsjyGvlr', requiredValidations],
      added_date: [''],
      modified_date: [''],
      status: ['']
    });
  }

  getCountryList() {
    let _self = this;
    this.conf.getApiCall('get_countries', {}, function (res) {
      if (res.data !== undefined && res.data.countries != undefined) {
        _self.listCountry = res.data.countries;
      }
    }, function (err) {
      console.log(err);
    });
  } 
}

, затем реализую его в нашем файле component.html 

   <app-address (formReady)="addFormControl($event)" [addressModal]="address"></app-address>

после события пожара в файле component.ts 

private addFormControl(name: string, formGroup: FormGroup): void {
    if (!this.form1.controls[name] && !this.form1.controls[name] !== undefined) {
        this.form1.addControl(name, formGroup);
    }
}

private addBlankAddress(): void {
    let address_obj: AddressModal = {
        id: '',
        row_id: this.conf.randomRowId(),
        opportunity_id: '',
        address1: '',
        address2: '',
        city: '',
        state: '',
        zipcode: '',
        country: 'S1ptmVWUWsjyGvlr',
        added_date: '',
        modified_date: '',
        status: ''
    };
    this.list_address.push(address_obj);
    //return address_obj;
}
0 голосов
/ 31 октября 2019

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

export abstract class AbstractComponent {

  property1: string;
  property2: long;

  commonMethod(): string {
      ...
  }
}

@Component({
   selector: 'app-component1',
   ...
})
export class Component1 extends AbstractComponent {
   ...
}

@Component({
   selector: 'app-component2',
   ...
})
export class Component2 extends AbstractComponent {
   ...
}
...