Question

我打算将<strong> Bootstrap 项目（纯粹的UI /视图）与 Angular2 项目（模型处理，UI读/写和服务器通信）分开。我怎样才能做到这一点？

Answer 1

创建 CommonModule ，如下所示

import { NgModule} from '@angular/core';
import { CommonModalComponent } from './modal.component';
import { ModalDirective,ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
@NgModule({
  imports:[ModalModule],
  declarations: [ CommonModalComponent ],
  exports:[CommonModalComponent]
})
export class CommonModule {}

如您所见， CommonModalComponent 是一个声明 CommonModule，如下所示创建该组件，

import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'common-modal', 
  template: `
   <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{title}}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ng-content select=".modal-body"> </ng-content>
      </div>

      <div class="modal-footer">
        <div class="pull-left">
          <button class="btn btn-default" (click)="hide()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</div>
  `,
})
export class CommonModalComponent {
   @ViewChild('childModal') public childModal:ModalDirective;
   @Input() title?:string;
  constructor() {
  }
  show(){
    this.childModal.show();
  }
  hide(){
    this.childModal.hide();
  }
}

使用AppModule中的CommonModule及其组件，如下所示

import {Component, ViewChild, ViewContainerRef, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from './common.module';
import {CommonModalComponent} './modal.component';
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button>
    <common-modal  #childModal [title]="'common modal'"> 
    </common-modal>
    </div>
  `,
})
export class App {
  @ViewChild('childComponent') childComponent:CommonModalComponent;
  name:string;
  constructor(private viewContainerRef: ViewContainerRef) {
    this.name = 'Angular 2 Common Module with ModalComponent'
  }
}

@NgModule({
  imports: [ BrowserModule,CommonModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

LIVE DEMO

我怎样才能保持Bootstrap＆amp; Angular2项目分开？

1 个答案: