ModalComponentのプロバイダはありません

Question

私は角度の初心者ですので、この質問は私の愚かです。私たちのアプリケーションでは、すべてのフォームがポップアップで表示されます。ヘッダーセクションにはいくつかのタブがあり、タブをクリックするとコンポーネントを読み込む必要があります。以下のコードを見て、コードに何が間違っているのかを教えてください。

モーダルビュー

<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({ 
    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(); 
} 

} 

上記のコードスニペットは、モーダルポップアップ用です

タブ1表示

<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> 

タブ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({ 

    }); 

} 

}

タブビュー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> 

タブ2コンポーネント

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

タブの性質上、アクティブなタブは1つのみであるため、簡単にタブを開くためのトリガができます。以下のような：コンポーネントで

あなたが持っている：

public activeTab = ''; 

と各タブのを、あなたは文字列の編集：

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

、あなたがアクティブなタブにしたいdivの上：

を

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

これは、常に1つのタブがアクティブであり、正しいコンポーネントをアクティブにすることを意味します。助けてくれることを願っています。私はAngularが可能な限り簡単にしようとしました。これはAngularが意味するものです：

"NoProvidor"の問題について。あなたが異なる ".model.ts"のコンポーネントを持っているなら、他のコンポーネントがそれに達することができるようにファイルのプロバイダタブでそれを提供する必要があります。問題をより多く、どこでそれを得るか説明してください。