如何将 Bootstrap 和 Angular 2 项目分开？答案

【问题标题】：How can I keep Bootstrap & Angular2 projects separate?如何将 Bootstrap 和 Angular 2 项目分开？
【发布时间】：2017-08-22 16:10:47
【问题描述】：

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

【问题讨论】：

创建两个不同的app.modules RootModule & FeatureModule。

标签： twitter-bootstrap angular twitter-bootstrap-3 angular-ui-bootstrap

【解决方案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

【讨论】：