ng-bootstrap 模式未显示

Posted 2023-02-22

【中文标题】ng-bootstrap 模式未显示

【英文标题】：ng-bootstrap modal is not displaying

【发布时间】：2017-09-20 02:42:45

【问题描述】：

我在我的应用程序中使用 ng-bootstrap 模式来显示对话框。但是在单击按钮时，什么也没有发生，模式没有显示。 调试时可能会发现调用了该操作，但未显示模态框。

这是我的 app.module.ts

import NgModule       from '@angular/core';
import BrowserModule  from '@angular/platform-browser';
import TaskService from '../app/task/task.service';
import TaskComponent from '../app/task/task.component';
import AppComponent   from './app.component';
import FormsModule ,ReactiveFormsModule from '@angular/forms';
import HttpModule  from '@angular/http';
import RouterModule, Routes,Route  from '@angular/router';
import AddNewTaskComponent from './task/addtask.component';
import EventComponent from '../app/controller/event.component'
import EventService from '../app/service/event.service'
import AddNewEventComponent from '../app/controller/addevent.component'
import AddEventService from '../app/service/addevent.service'
import WeatherComponent from '../app/controller/weather.component'
import LoginComponent from '../app/controller/login.component'
import RegisterComponent from '../app/controller/register.component'
import DashBoardcomponent from '../app/controller/dashboard.component'
import FeatureComponent,StoryComponents from '../app/controller/feature.component'
import AddTaskService from '../app/task/addtask.service'
import FeatureServices  from '../app/service/feature.services'
import FileUploadComponents  from '../app/controller/fileUpload.component'
import AngularFireModule  from 'angularfire2'
import NgbModule  from '@ng-bootstrap/ng-bootstrap'


//index routing , redirect to login for the blank request
const indexRoutes:Route = 
  path:'',component:LoginComponent


// for all invalid routers , it will redirect to login component
const fallbackRoutes = 
  path:'**',component:LoginComponent



// order is important, routes get called on the order which they defined
const routes: Routes = [
  indexRoutes,

   path: 'register', component: RegisterComponent ,
   path: 'dash', component: DashBoardcomponent,
    children: [
         // shows feature   as default
          path: '',
          redirectTo: 'feature',
          pathMatch: 'full'
      ,
         
          path: 'events', 
          component: EventComponent,
            children:[
                
                  path: 'addevent',
                  component: AddNewEventComponent
              
            ]
      ,
      
        
          path: 'task',
          component: TaskComponent,
          children:[
                
                  path: 'addtask',
                  component: AddNewTaskComponent
              
            ]
      ,
       
         path: 'weather',
         component: WeatherComponent
      ,
       
         path: 'feature',
         component: FeatureComponent,
      ,
       
         path: 'uploads',
         component: FileUploadComponents,
      

  ]
 
];

export const routing = RouterModule.forRoot(routes);
 
      ;
@NgModule(
  imports:   [ 
    BrowserModule ,  
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    AngularFireModule.initializeApp(firebaseConfig),
    NgbModule.forRoot()
    ],
    providers: [TaskService,EventService,AddEventService,AddTaskService,FeatureServices],
    declarations: [
      AppComponent,
      LoginComponent,
      TaskComponent,      
      AddNewTaskComponent,
      EventComponent,
      AddNewEventComponent,
      WeatherComponent,
      RegisterComponent,
      DashBoardcomponent,
      FeatureComponent,
      FileUploadComponents,
      StoryComponents
     ],
  entryComponents: [StoryComponents],
    bootstrap: [
     AppComponent 
    ],

    
)
export class AppModule  

这是我的 FeatureComponent 类

import  Component, ViewChild,Input  from '@angular/core';
import  ModalComponent  from 'ng2-bs3-modal/ng2-bs3-modal';
import FeatureServices from '../service/feature.services'
import ComponentAction from '../base/Component.action'
import Features from '../model/feature'
import  NgForm  from '@angular/forms';
import NgbModal, NgbActiveModal from '@ng-bootstrap/ng-bootstrap';


@Component(
        selector: 'addstories',
        template: `
    
        <div class="modal-header">
            <h4 class="modal-title">Hi there!</h4>
            <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            <p>Hello, name!</p>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
        </div>
    
    `    
)
export class StoryComponents 
  @Input() name;

  constructor(public activeModal: NgbActiveModal) 


@Component(
    moduleId:module.id,
    selector:'feature',
    template:`
    
         <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
         
        <div>
            <button class="btn btn-primary" (click)="listFeature()">All Features</button>
            <button class="btn btn-primary" (click)="showAddFeature()" >Add Features</button>
        </div>
        enableAddFeature
            <!-- loads child component list task and add new task -->
            <router-outlet></router-outlet>

            <form *ngIf="mode == 'insert' || mode == 'update' " #featureForm="ngForm" (ngSubmit)="processFeature(featureForm)">
                    <div class="form-group">
                        <label for="title">Feature Title</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="Enter Feature Title" [(ngModel)]=selectedFeature.title>
                    </div>
                    <div class="form-group">
                        <label for="descr">Feature Title</label>
                        <input type="text" class="form-control" id="descr" name="descr" placeholder="Enter Feature Description" [(ngModel)]=selectedFeature.descr>
                    </div>
                    <div class="form-group">
                        <label for="area">Feature Title</label>
                        <input type="text" class="form-control" id="area" name="area" placeholder="Enter Feature Area" [(ngModel)]=selectedFeature.area>
                    </div>                   
                    <button type="submit" class="btn btn-primary">Submit</button>
                    
                </form>
                <br/>
          <div class="container">
            <div class="row">
                <div class="">
                    <table class="table table-hover table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th class="col-md-2">Title</th>
                                <th class="col-md-2">Descr</th>
                                <th class="col-md-1">Area</th>
                                <th class="col-md-1">User Stories</th>
                                <th class="col-md-1"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let feature of features">
                                <td><a data-toggle="modal" data-target="#myModal">feature.title</a></td>
                                <td>feature.descr</td>
                                <td>feature.area</td>
                                <td *ngIf ="feature.userstories == null" >0</td>
                                <td *ngIf ="feature.userstories != null" > feature.userstories.length</td>
                                <td><a class='btn btn-info btn-xs'  (click)="editFeature(feature._id)"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a (click)="deleteFeature(feature)" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <button type="button" class="btn btn-default" (click)="open()">Open me!</button>

    `

)

export class FeatureComponent extends ComponentAction

    features:Features[]
    mode :string = "start";
    isEditMode = false;
    selectedFeature: Features;
   

    constructor(private featureService:FeatureServices,private modalService: NgbModal)
       super();
       this.getFeatures();
    

    getFeatures()
        this.featureService.getFeatures()
        .subscribe(result => 
            console.log('features from mongo :'+JSON.stringify(result))
            this.features = result;
            console.log('this features :'+JSON.stringify(this.features))
        )  
    


    open() 
        console.log('u clicked me');
        const modalRef = this.modalService.open(StoryComponents);
        modalRef.componentInstance.name = 'World';
        console.log('finshed');
  
    

我有一个功能列表，每个功能都包含不同的用户故事，因此我计划在模态框上显示将用户故事添加到未来的选项。但是单击 StoryComponent 时不显示。

【参考方案1】：

我遇到了同样的问题，问题出在 CSS 上。当我检查文档的元素时，发现模态元素已创建但未显示在屏幕中。下面的css已经解决了这个问题。

   .modal-backdrop.fade
   
     opacity: 0.5;
   
   .modal-open .modal
   
     opacity: 1;
   

【讨论】：

嗯。那行得通。为什么这是必要的，而不是在最新版本中修复？

此外，我必须在 .modal-backdrop.fade opacity 中添加 '!important' 才能使其正常工作。

【参考方案2】：

ng-bootstrap 仅适用于 Bootstrap 4，与 Bootstrap 3 不兼容。

【讨论】：

嗨，谢谢你，但我想用 bootstarp 3 来实现这个，怎么做？ b'因为我的整个项目都依赖于 bootstrap 3 版本，如果我现在使用 4，那么一切都会受到影响。除了 ng-bootstarap 你能推荐更好的 bootstarp 3.X 方法

我有 bootstrap 4 但没有工作。 @Vairavan 的回答解决了我的问题。

@PrasannaSasne chechout：npmjs.com/package/ng-bootstrap-to-bootstrap-3。它对我有用。

【参考方案3】：

正如@Ansar Samad 指出的那样，它仅适用于引导程序 4。如果您在引导程序 3 项目中需要它，您可以查看 https://www.npmjs.com/package/ng-bootstrap-to-bootstrap-3

说明：

npm install ng-bootstrap-to-bootstrap-3

import 'ng-bootstrap-to-bootstrap-3' 在您的代码中的某处。

就是这样！

【讨论】：

我不得不在文件中的引导 css 之后添加 'ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css' 而不是你提到的导入angular.json

@myrmix 我明白了。我现在正在使用 webpack，我正在将 angular js 移植到 angular 6。

【参考方案4】：

我也遇到了同样的问题，发现我的styles.css 中没有包含引导程序的 css 链接。虽然我使用的是 ng-bootstrap 和 bootstrap v4。

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');

【讨论】：

您先生是一位绅士和一位学者。我正用头撞墙，你救了我的命。

【参考方案5】：

现在将@ng-bootstrap/ng-bootstrap 更新为^8.0.1 即可解决此错误，

更新后如果出现此错误：

在非 ES5 类上调用 getInternalNameOfClass() 时出错

尝试将tsconfig.json 的compilerOptions 中的目标从es5 更改为es2015