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

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

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

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


person Guillaume OSTORERO    schedule 31.10.2019    source источник
comment
Я только что нашел эту тему stackoverflow.com/questions/50589902/   -  person Guillaume OSTORERO    schedule 31.10.2019
comment
попробуйте изучить сервисы в angular   -  person jitender    schedule 31.10.2019
comment
Я довольно новичок в Angular, не могу представить, как сделать сервис, который позволит использовать функции для нескольких компонентов: с   -  person Guillaume OSTORERO    schedule 31.10.2019
comment
Я буду исследовать больше, TY   -  person Guillaume OSTORERO    schedule 31.10.2019


Ответы (2)


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

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 {
   ...
}
person uminder    schedule 31.10.2019
comment
Мне пришлось поделиться данными о собственности, так что лучше воспользоваться услугой? - person Guillaume OSTORERO; 31.10.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;
}
person Arvind    schedule 31.10.2019
comment
Привет, я хочу поделиться и использовать одну и ту же форму в 2 компонентах. Один компонент предназначен для вставки, а второй — для изменения, чтобы в форме были предварительно выбраны некоторые значения. Как я могу справиться с этим? я пытался создать сервис, но когда я создаю форму в сервисе и patchValue в форме внутри компонента, он говорит, что patchValue не может прочитать patchValue неопределенного. И когда я устал, верхняя консоль регистрирует форму, все в порядке, форма удаляется и инициализируется. - person Guillaume OSTORERO; 31.10.2019