ng Bootstrap + angular4: dynamische HTML-modalen Inhalt Laden

Question

Ich habe die folgende Architektur:

. 
├── companies.component.ts 
├── companies.html 
├── companies.service.ts 
└── components 
   └── modal 
    ├── modal.component.html 
    └── modal.component.ts 

Meine modale Komponente wie folgt aussieht:

@Component({ 
    selector: 'service-modal', 
    templateUrl: './modal.component.html' 
}) 
export class ModalComponent implements OnInit { 

    public modalHeader: string; 
    public modalContent: string; 

    constructor(private activeModal: NgbActiveModal) { 
    } 

    public ngOnInit() { 
    } 

    public closeModal() { 
    this.activeModal.close(); 
    } 
} 

Und ich es von meinem companies.component.ts wie folgt aus:

const activeModal = this.modalService.open(ModalComponent, { size: 'lg' }); 
activeModal.componentInstance.modalHeader = 'Create company'; 
activeModal.componentInstance.modalContent = 'company form'; 

Ich möchte die modale Komponente verwenden, um Firma ODER Benutzereinheiten zu erstellen. Ist es eine gute Übung, HTML-Formular an den ModalContent zu binden? Gibt es einen anderen Weg? Sollte ich zwei verschiedene modale Komponenten erstellen (eine für den Benutzer, eine für die Firma)?

Answer 1

Zuerst können Sie Ihr Modal an anderen Stellen wiederverwenden. Sie sollten diese Komponente also in einen "gemeinsamen" Ordner legen.

Dann haben Sie mehrere Lösungen:

1. Mit ng-Gehalt. Sie erstellen Ihre modale Komponente oder verwenden Bootstraps.

<my-modal> 
    <my-comp-to-create-companies> 
    </my-comp-to-create-companies> 
</my-modal> 
<my-modal> 
    <my-comp-to-edit-companies></my-comp-to-edit-companies> 
</my-modal> 

Sie könnten in der Lage sein, bearbeiten fusionieren/Komponenten erstellen, weil die Form die gleichen Eigenschaften haben könnte.

2. dynamische Komponente Loader: https://angular.io/guide/dynamic-component-loader