Question

我想在单击按钮时显示模态，但我看到发生了某些事情，但模态不可见。我试着遵循plunker 我的NgModule声明，提供程序，导入......中必定存在错误。

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';
  }
}

调用我的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

@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

@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

我无法看到你的index.html，但请确保你已经链接了这个链接的bootstrap css

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css＆＃34;

还要确保在package.json中添加了＆＃34; typescript＆＃34;，因为这是应该安装的依赖项之一。所以如果你还没有运行这个命令：

npm install typescript --save

Answer 2

我已尝试过两种可能的解决方案，但未成功。我的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>

我的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 个答案: