在Angular 4中切换Ng-Bootstrap模态

Question

I want to display a modal when I click on a button, but I see that something is happening, but the modal is not visible. 我想在单击按钮时显示模态，但是我看到正在发生某些事情，但是模态不可见。 I tried to follow that plunker There must be an error in my NgModule Declarations, Providers, Imports... 我试图跟随那个笨拙的人我的NgModule声明，提供程序，导入中肯定有错误...

devices.component.ts (the page where I want my modal to show up) devices.component.ts（我希望显示模态的页面）

import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild,} from '@angular/core';
import {Http} from "@angular/http";
import {Headers} from '@angular/http';
import {Router} from "@angular/router";
import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";


@Component({
  selector: 'ngbd-modal-content',
  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 NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}


@Component({
  selector: 'devices',
  templateUrl: 'devices.template.html'
})
export class DevicesComponent implements OnDestroy, OnInit  {
  public constructor(
    private http: Http,
    public router: Router,
    private modalService: NgbModal
  ) {
    this.nav = document.querySelector('nav.navbar');
    localStorage.setItem('currrentRoute', 'devices');
  }

  public openModal() {
    // jQuery(this.myModal.nativeElement).modal('show');
    //alert('hello');
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

Call in my devices.template.html 呼叫我的devices.template.html

<h5>My Registered <strong>devices</strong></h5>
<button class="btn btn-primary pull-right" type="button" (click)="openModal()">
  <i class="fa fa-plus"></i> Add a device
</button>

appviews.module.ts appviews.module.ts

@NgModule({
  declarations: [
    UserComponent,
    DevicesComponent,
    DeviceComponent,
    NgbdModalContent

  ],
  imports: [
    BrowserModule,
    RouterModule,
    DataTableModule,
    PeityModule,
    SparklineModule,
    NgbModule.forRoot()
  ],
  exports: [
    UserComponent,
    DevicesComponent,
    DeviceComponent,
  ],
  entryComponents: [NgbdModalContent],
})

export class AppviewsModule {
}

app.module.ts app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AuthModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    DashboardsModule,
    LayoutsModule,
    AppviewsModule,
    RouterModule.forRoot(ROUTES)
  ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I can't see your index.html, But make sure you have linked the bootstrap css which is the this link 我看不到您的index.html，但请确保已链接了bootstrap css，这是此链接

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css " https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css “

Also make sure that in your package.json you have added "typescript", because this is one of dependencies that should be installed too. 还要确保在package.json中添加了“ typescript”，因为这也是应该安装的依赖项之一。 So if you haven't please run this command : 因此，如果没有，请运行以下命令：

npm install typescript --save

Answer 2

I've tried both possible solution but unsuccessfully. 我尝试了两种可能的解决方案，但均未成功。 My index.html is pretty empty: 我的index.html非常空：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>IoThings</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

And my devices.template.html contains: 我的devices.template.html包含：

<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-lg-12">
      <div class="text-center m-t-lg">
        <h1>My devices</h1>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-lg-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>My Registered <strong>devices</strong></h5> <button class="btn btn-primary pull-right" type="button" (click)="openModal()"><i class="fa fa-plus"></i> Add a device</button>
          <div ibox-tools></div>
        </div>
        <div class="ibox-content">
          <table [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5" class="table table-striped table-bordered table-hover dataTables-example">
            <thead>
            <tr>
              <th *ngFor="let column of columns"><span [innerHTML]="column"></span></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let row of data">
              <td>{{row.name}}  <a [routerLink]="['/device', row.id, 'deviceInformation']">{{row.id}}</a></td>
              <td *ngIf="row.userId == user_id; else other_user">
                {{user_firstname}} {{user_lastname}} (Me)
              </td>
              <ng-template #other_user>
                <td>
                  Other user
                </td>
              </ng-template>
              <td>{{row.sigfoxId}}</td>
              <td>{{row.bleMac}}</td>
              <td>{{row.lastAcc * 1000 | date:'dd/MM/yy hh:mm:ss'}}</td>
              <td><div *ngIf="row.active;else not_valid"><i class="fa fa-check text-navy"></i></div></td>
              <ng-template #not_valid><i class="fa fa-times text-navy"></i></ng-template>
            </tr>
            </tbody>
            <tfoot>
            <tr>
              <td colspan="4">
                <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
              </td>
            </tr>
            </tfoot>
          </table>


        </div>
      </div>
    </div>

</div>

在Angular 4中切换Ng-Bootstrap模态

问题描述

2 个解决方案

解决方案1
0 2017-05-09 03:04:41

解决方案2
0 2017-05-09 07:50:03

在Angular 4中切换Ng-Bootstrap模态

问题描述

2 个解决方案

解决方案1 0 2017-05-09 03:04:41

解决方案2 0 2017-05-09 07:50:03

解决方案1
0 2017-05-09 03:04:41

解决方案2
0 2017-05-09 07:50:03