我有Angular 7
“ngx引导”:“^3.1.4”和“引导”:“^4.3.1”
这些完全兼容吗?
我试图打开组件在模态这个问题:ngx-bootstrap如何打开一个模态从另一个组件?
但是我得到了这个错误:
错误错误:未捕获(promise中):错误:StaticInjectorError(AppModule)[DialogBoxComponent-
我已经导入ngx在我的模块为:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from "./app.component";
import { AppHeaderComponent } from './app-header/app-header.component';
import { AppFooterComponent } from './app-footer/app-footer.component';
import { AppRoutingModule } from './app-routing.module';
import { PoliciesComponent } from './policies/policies.component';
import { AddComponent } from './add/add.component';
import { ReactiveFormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap';
import { ModalContentComponent } from './modal-content/modal-content.component';
@NgModule({
declarations: [AppComponent, AppHeaderComponent, AppFooterComponent, PoliciesComponent, AddComponent, ModalContentComponent],
imports: [
ModalModule.forRoot(),
HttpClientModule,
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent, ModalContentComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'modal-content',
templateUrl: './modal-content.component.html',
})
export class ModalContentComponent {
title: string;
closeBtnName: string;
list: any[] = [];
constructor(public bsModalRef: BsModalRef) { }
ngOnInit() {
this.list.push('PROFIT!!!');
}
}
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { PoliciesService } from './policies.service';
import { Policy } from 'src/models/policy';
import { Gender } from 'src/models/gender';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { ModalContentComponent } from '../modal-content/modal-content.component';
@Component({
selector: 'app-policies',
templateUrl: './policies.component.html',
styleUrls: ['./policies.component.scss']
})
export class PoliciesComponent implements OnInit {
gender = Gender;
policies: Policy[];
bsModalRef: BsModalRef;
constructor(private policiesService: PoliciesService, private modalService: BsModalService) { }
ngOnInit() {
this.policiesService
.getAll()
.subscribe(p => this.policies = p);
}
deleteClicked(id: number) {
this.policiesService
.delete(id)
.subscribe(() => this.deleteFrom(this.policies, id));
}
private deleteFrom(arr: Policy[], id: number) {
arr.splice(arr.findIndex((p: Policy) => p.policyNumber === id), 1);
}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, { initialState });
this.bsModalRef.content.closeBtnName = 'Close';
}
}
我在添加ModalContentComponent时出错。应将其添加到模块中,如下所示:
providers: [],
entryComponents: [ModalContentComponent],
bootstrap: [AppComponent]
})
问题内容: 我在使用的选择功能时遇到麻烦。我测试了变量是否正确填充。一切似乎都不错,但是select函数根本无法工作。 问题答案: 我自己解决了。选择一个单词之前,textarea需要获得焦点! 这是带有新代码行的搜索功能:
主要内容:用法,实例,选项,方法,实例,事件,实例模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以切换模态框(Modal)插件
本文向大家介绍Bootstrap模态对话框中显示动态内容的方法,包括了Bootstrap模态对话框中显示动态内容的方法的使用技巧和注意事项,需要的朋友参考一下 首先引入bootstrap的js和css,在引入对应版本的jquery; 添加按钮,点击弹出模态窗体: 创建模态对话框: 注意:如果发现二级窗体打开一次后再打开失败,请看看href引用的界面中,是否在header中引入了css或js,这里不
问题内容: 最近我正在学习angularjs。我以前使用过引导程序。使用jquery,我可以轻松更改模态组件位置的位置以使其垂直对齐。现在使用angularjs,似乎很难做到这一点。这是ui引导模态的一个庞克链接,有人知道如何使其垂直对齐吗? ui引导程序模态组件 1.index.html 2.example.js 问题答案: 如果我正确理解了您的问题,则只需使用CSS即可实现垂直居中对齐。添加以
我有一个选择元素,里面有多个选项: 对于这里看到的每个选项元素,我都有另一个select元素。基本上,我在一个选择元素中列出了一系列音乐流派,在它下面,是与每一个“主流派”相关的子流派。 我想做的是使子体裁只有在相对体裁被选中时才可见。例如,如果用户选择“Pop”,我想向他们显示包含Pop子类型的相关选择字段。 我的HTML标记实际上是由WordPress插件生成的,不幸的是,我无法编辑它。也就是
问题内容: 我在一个名为的页面中有一个锚点,但在获取Bootstrap模式以显示另一个名为的页面中的数据时遇到了麻烦。 menu.html Lab6.html 我做错什么了吗? 问题答案: 更新资料 您尝试从另一个页面获取模式内容的方式不正确。 根据Bootstrap的文档: 如果提供了远程URL,则将通过jQuery的load方法加载一次内容并将其注入div中。如果您使用的是data- api,