Aucun fournisseur pour ModalComponent

Question

Je suis un débutant en angulaire donc cette question peut être stupide. Dans notre application, tous les formulaires sont affichés dans un popup. Dans la section d'en-tête il y a plusieurs onglets et j'ai besoin de charger le composant en cliquant sur l'onglet. S'il vous plaît regarder dans le code ci-dessous et suggérer ce qui ne va pas avec le code.

Modal Voir

<modal (dismissPopup)="dismiss($event)" #myModal [keyboard]="false" [cssClass]="'my-modal'" [backdrop]="'static'"> 
<modal-header [show-close]="true"> 
    <div class="modal-header"> 
     <div class="col-md-12" style="top:-7px;left:0px;padding-left:0px;"> 
      <!-- Nav tabs --><div class="card"> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="active tab-content"><a class="popup-tab completed" id="lnkCounterParty" href="#"><span class="fa fa-university"></span> Counterparty <span class="fa fa-check-circle-o" style="font-size:13px;vertical-align:super;"></span></a></li> 
        <li role="presentation" class="tab-content"><a class="popup-tab" id="lnkParticipant" href="#"><span class="fa fa-users"></span>Participant</a></li> 

       </ul> 
      </div> 
     </div> 
    </div> 
</modal-header> 
<div class="clear"></div> 
<cpdb-counterparty (dismissPopup)="dismiss($event)"></cpdb-counterparty> 

Component Modal

@Component({ 
    selector: 'cpdb-modal-popup', 
    templateUrl: 'app/modalPopup/modalPopup.component.html' 
}) 


export class modalPopupComponent { 
@ViewChild('myModal') 

modal: ModalComponent; 

constructor(private componentFactoryResolver: ComponentFactoryResolver, 
    private viewContainerRef: ViewContainerRef) { 
} 

openCounterpartyAddress() { 
    debugger; 
    const factory = this.componentFactoryResolver.resolveComponentFactory(addressComponent); 
    const ref = this.viewContainerRef.createComponent(factory); 
    ref.changeDetectorRef.detectChanges(); 
} 

open() { 
    this.modal.open(); 
} 

close() { 
    this.modal.close(); 
} 

} 

Au-dessus de code est extrait pour pop-up modal

Tab 1 Voir

<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit(AddressForm.valid)"> 
<modal-body> 
    <div class="container-fluid fundmodal"> 
     <!-- Search Panel --> 

    </div> 

</modal-body> 
<modal-footer> 
    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="resetForm()">Cancel</button> 
    <button type="submit" [disabled]="!counterPartyForm.valid" class="btn btn-primary">Submit</button> 
</modal-footer> 

Tab 1 Component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core' 
import { FormControl, FormGroup, Validators } from '@angular/forms' 

@Component({ 
selector: 'cpdb-address', 
templateUrl: 'app/address/address.component.html', 
outputs: ['dismissPopup'] 


}) 

export class addressComponent { 
addressForm = new FormGroup({ 

}); 

//constructor(private helloWorldService: HelloWorldService) { 
//} 

ngAfterViewInit(): void { 

} 

//private getAnswer() { 
// return this.helloWorldService.giveMeTheAnswer(); 
//} 

onSubmit(isFormValid: boolean) { 
} 

resetForm() { 
    this.addressForm = new FormGroup({ 

    }); 

} 

}

Voir Tab 2

<form [formGroup]="addressForm" novalidate 
(ngSubmit)="onSubmit(AddressForm.valid)"> 
<modal-body> 
    <div class="container-fluid fundmodal"> 
     <!-- Search Panel --> 

    </div> 

</modal-body> 
<modal-footer> 
    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="resetForm()">Cancel</button> 
    <button type="submit" [disabled]="!counterPartyForm.valid" class="btn btn-primary">Submit</button> 
</modal-footer> 

Tab 2 Composant

import { Component, Output, EventEmitter, OnInit } from '@angular/core'; 
import { FormControl, FormGroup, Validators } from '@angular/forms' 

@Component({ 
    selector: 'cpdb-counterparty', 
    templateUrl: 'app/counterparty/abc.component.html', 
    outputs: ['dismissPopup'] 
}) 

export class counterPartyComponent { 

dismissPopup = new EventEmitter<string>(); 

public submitted: boolean; 
public IsSeiClient: boolean = false; 



onSubmit(isFormValid: boolean) { 
    if (isFormValid) { 
     console.log(this.counterPartyForm.value); 
    } 
    else { 
     this.submitted = true; 
    } 
} 



resetForm() { 
    this.counterPartyForm = new FormGroup({ 

    }); 

} 

}

app.module.ts

@NgModule({ 
imports: [BrowserModule, Ng2Bs3ModalModule, ReactiveFormsModule], 
declarations: [AppComponent, tab1Component, tab2Component], 
bootstrap: [AppComponent], 
entryComponents: [addressComponent], 
providers: [ 
    { 
     provide: ErrorHandler, 
     useClass: GlobalErrorHandler 
    } 
] 

})

Answer 1

En raison de la nature des onglets, qu'il n'y a qu'un seul onglet actif, vous pouvez facilement avoir un déclencheur pour ouvrir les onglets. comme:

dans le composant que vous avez:

public activeTab = ''; 

et sur chaque onglet, vous modifiez la chaîne:

<li (click)="activeTab = 'Counterparty'"> 
    <p>Counterparty</p> 
</li> 
<li (click)="activeTab = 'Participant'"> 
    <p>Participant</p> 
</li> ...... 

et sur la div où vous voulez l'onglet actif:

<counter-party *ngIf="activeTab === 'Counterparty'"></counter-party> 
<participant *ngIf="activeTab === 'Participant'"></participant > 

cela signifie qu'il y a toujours un onglet actif et activera le composant correct. J'espère que cela aidera. J'ai toujours essayé de le rendre aussi facile que possible avec Angular, parce que c'est ce que représente Angular :)

à propos du problème sur "NoProvidor". Si vous avez les composants dans différents ".model.ts" alors vous devez le fournir dans l'onglet des fournisseurs dans le fichier, afin que d'autres composants puissent l'atteindre. Expliquez le problème plus et où vous l'obtenez.