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

由于选项卡的性质，只有一个选项卡处于活动状态，因此您可以轻松触发以打开选项卡。喜欢：

你所拥有的组件：

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 >

这意味着始终有一个选项卡处于活动状态，并将激活正确的组件。希望有所帮助。我一直试图用Angular使它变得尽可能容易，因为这就是Angular代表的地方:)

关于“NoProvidor”的问题。如果组件位于不同的“.model.ts”中，则需要在文件的“提供程序”选项卡中提供它，以便其他组件可以访问它。更多地解释问题以及从何处获得问题。

没有ModalComponent的提供者

1 个答案: