Angulaire 8 composant Générique

J'ai un certain nombre de composants, dont la logique est presque identique. Par exemple:

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

import { Rule } from '@models';
import { ConfirmationDialogComponent } from '@core';
import { RulesSaveComponent } from './rules-save.component';
import { RuleService } from '@services';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-rules',
    templateUrl: './rules.component.html',
    styleUrls: ['./rules.component.scss'],
})
export class RulesComponent implements OnInit {
    rules: Rule[];

    constructor(private modalService: NgbModal, private ruleService: RuleService) {}

    ngOnInit() {
        this.ruleService.items.subscribe(rules => (this.rules = rules));
    }

    openModal(id: number) {
        const modalRef = this.modalService.open(ConfirmationDialogComponent);
        modalRef.componentInstance.message = 'Deleting a rule is irreversible. Do you wish to continue?';
        modalRef.result.then(
            () => {
                this.ruleService.delete(id);
            },
            () => {
                // Do nothing
            },
        );
    }

    openSaveForm(rule: Rule) {
        const modalRef = this.modalService.open(RulesSaveComponent);
        modalRef.componentInstance.feedId = rule.feedId;
        modalRef.componentInstance.ruleId = rule.id;
        modalRef.componentInstance.modal = true;
    }
}

Et:

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

import { Conversion } from '@models';
import { ConfirmationDialogComponent } from '@core';
import { ConversionsSaveComponent } from './conversions-save.component';
import { ConversionService } from '@services';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-conversions',
    templateUrl: './conversions.component.html',
    styleUrls: ['./conversions.component.scss'],
})
export class ConversionsComponent implements OnInit {
    conversions: Conversion[];

    constructor(private modalService: NgbModal, private conversionService: ConversionService) {}

    ngOnInit() {
        this.conversionService.items.subscribe(conversions => (this.conversions = conversions));
    }

    openModal(id: number) {
        const modalRef = this.modalService.open(ConfirmationDialogComponent);
        modalRef.componentInstance.message = 'Deleting a conversion is irreversible. Do you wish to continue?';
        modalRef.result.then(
            () => {
                this.conversionService.delete(id);
            },
            () => {
                // Do nothing
            },
        );
    }

    openSaveForm(conversion: Conversion) {
        const modalRef = this.modalService.open(ConversionsSaveComponent);
        modalRef.componentInstance.feedId = conversion.feedId;
        modalRef.componentInstance.conversionId = conversion.id;
        modalRef.componentInstance.modal = true;
    }
}

Ou pour l'enregistrement des détails, j'ai:

import { Component, OnInit, Input } from '@angular/core';
import { first } from 'rxjs/operators';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Rule } from '@models';
import { RuleService } from '@services';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-rules-save',
    templateUrl: './rules-save.component.html',
    styleUrls: ['./rules-save.component.scss'],
})
export class RulesSaveComponent implements OnInit {
    @Input() feedId: number;
    @Input() id: number;
    @Input() modal: boolean;
    saveForm: FormGroup;
    loading = false;
    submitted = false;
    editing: boolean;

    constructor(
        private activeModal: NgbActiveModal,
        private formBuilder: FormBuilder,
        private ruleService: RuleService,
    ) {}

    ngOnInit() {
        this.get(this.feedId);
    }

    // convenience getter for easy access to form fields
    get f() {
        return this.saveForm.controls;
    }

    onSubmit() {
        this.submitted = true;

        if (this.saveForm.invalid) {
            return;
        }

        let rule: Rule = {
            id: this.id,
            feedId: this.feedId,
            name: this.f.name.value,
            fieldName: this.f.fieldName.value,
            filterOperator: this.f.filterOperator.value,
            expression: this.f.expression.value,
        };

        this.loading = true;
        this.ruleService[this.editing ? 'update' : 'create'](rule).subscribe(() => {
            this.reset();
            this.activeModal.close('ok');
        });
    }

    private get(feedId: number) {
        this.editing = !!this.id;

        if (this.editing) {
            this.ruleService.get(this.id).subscribe(rule => {
                this.buildForm(rule);
            });
        } else {
            var rule = new Rule();

            rule.id = 0;
            rule.feedId = feedId;

            this.buildForm(rule);
        }
    }

    private buildForm(rule: Rule) {
        this.saveForm = this.formBuilder.group({
            name: [rule.name, Validators.required],
            fieldName: [rule.fieldName, Validators.required],
            filterOperator: [rule.filterOperator, Validators.required],
            expression: [rule.expression, Validators.required],
        });
    }

    private reset() {
        if (this.editing) return;

        this.submitted = false;
        this.saveForm.reset();
    }
}

et

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Conversion } from '@models';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ConversionService } from '@services';

@Component({
    selector: 'app-conversions-save',
    templateUrl: './conversions-save.component.html',
    styleUrls: ['./conversions-save.component.scss'],
})
export class ConversionsSaveComponent implements OnInit {
    @Input() feedId: number;
    @Input() id: number;
    @Input() modal: boolean;
    saveForm: FormGroup;
    loading = false;
    submitted = false;
    editing: boolean;

    constructor(
        private activeModal: NgbActiveModal,
        private formBuilder: FormBuilder,
        private conversionService: ConversionService,
    ) {}

    ngOnInit() {
        this.get(this.feedId);
    }

    // convenience getters for easy access to form fields
    get f() {
        return this.saveForm.controls;
    }

    onSubmit() {
        this.submitted = true;

        if (this.saveForm.invalid) {
            return;
        }

        let conversion: Conversion = {
            id: this.id,
            feedId: this.feedId,
            name: this.f.name.value,
            fieldName: this.f.fieldName.value,
            filterOperator: this.f.filterOperator.value,
            expression: this.f.expression.value,
            mathOperator: this.f.mathOperator.value,
            value: this.f.value.value,
        };

        this.loading = true;
        this.conversionService[this.editing ? 'update' : 'create'](conversion).subscribe(() => {
            this.reset();
            this.activeModal.close('ok');
        });
    }

    private get(feedId: number) {
        this.editing = !!this.id;

        if (this.editing) {
            this.conversionService.get(this.id).subscribe(conversion => {
                this.buildForm(conversion);
            });
        } else {
            var conversion = new Conversion();

            conversion.id = 0;
            conversion.feedId = feedId;

            this.buildForm(conversion);
        }
    }

    private buildForm(conversion: Conversion) {
        this.saveForm = this.formBuilder.group({
            name: [conversion.name, Validators.required],
            fieldName: [conversion.fieldName, Validators.required],
            filterOperator: [conversion.filterOperator, Validators.required],
            expression: [conversion.expression, Validators.required],
            mathOperator: [conversion.mathOperator, Validators.required],
            value: [conversion.value, Validators.required],
        });
    }

    private reset() {
        if (this.editing) return;

        this.submitted = false;
        this.saveForm.reset();
    }
}

Il n'y a pas beaucoup de différence entre ces. En effet, pour chaque type (liste et enregistrer), vous pouvez voir que les changements sont les mêmes à travers eux tous. Ainsi, dans la liste des composants, les modifications sont les suivantes:

  • l'injection de service (RuleService ou ConversionService) et
  • le message.

Autre que cela, ils sont identiques.

Pour la sauver des composants, les modifications sont les suivantes:

  • l'injection de service
  • le modèle construit avant l'enregistrement
  • le buildForm méthode de création de former des groupes

Donc, parce que j'ai ce même motif répété de nombreuses fois, j'espérais qu'il pourrait être un moyen de faire un composant générique?

0
2019-09-17 10:50:46
source
1 réponses

Avec des promesses, il est important de garder le then et catch blocs alignés. La création de blocs imbriqués peut causer de la confusion. Vous devez également vous assurer de retourner un résultat de chaque bloc, qui sera traitée dans un bloc ci-dessous.

Vous essayez de fondamentalement lire à partir de la numbers document de chaque utilisateur d'enregistrer et de traiter avec la liste des numéros. Cela ressemblerait à quelque chose comme ce qui suit:

userCollection.get().then((docs) => {
  return Promise.all(docs.map((docRef) => {
    return docRef.collection('numbers').get();
  });
}).then((numbersDocs) => {
  // do something with the list of docs
});
+0
2019-09-19 11:48:09

Voir d'autres questions sur les étiquettes