我正在尝试制作一个包含输入字段和按钮的弹出窗口。以下是代码
父Component.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col-sm-6">
<div class="">
<div class="d-flex align-items-center ">
<span class="icn-img"></span>
<div class="ml-2">No </div>
</div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col-sm-6">
<div class="api-lst">
<div class="card data border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div>
</div>
</div>
</div>
父component.ts
<div class="form-group">
<button type="submit" class="btn btn-success" (click)="onClickEa()">Add </button>
</div>
弹出component.html
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ConfigPopupComponent } from '../config-popup/config-popup.component';
@Component({
selector: 'app-providerservice',
templateUrl: './providerservice.component.html',
styleUrls: ['./providerservice.component.css']
})
export class ProviderserviceComponent implements OnInit, AfterViewInit {
constructor(private modalService: NgbModal) { }
ngAfterViewInit(): void {
this.open();
}
open() {
const modalRef = this.modalService.open(ConfigPopupComponent);
}
}
app.module.ts
<div>
popup worked
</div>
当我单击父视图中的添加按钮时,子组件应显示为弹出窗口。以前我当时有一些错误,我添加了popup组件作为输入组件。但是仍然有错误。 任何人,请帮助
答案 0 :(得分:0)
您拼错了组件名称。
您将其导入为:
import { ConfigPopupComponent } from '../config-popup/config-popup.component';
并将其用作:
const modalRef = this.modalService.open(EaConfigPopupComponent); // see this component is not imported
看到组件名称是不同的。您尚未导入此组件。
因此,将其更改为:
const modalRef = this.modalService.open(ConfigPopupComponent);