typescript - Cách sử dụng bootstrap 4 trong angular 2?

Tôi đang xây dựng một ứng dụng Angular 2 viết bằng TypeScript. Nó sẽ sử dụng framework Bootstrap 4 kết hợp với một số chủ đề tùy chỉnh, điều này có khả thi không?

Gói npm "ng2-bootstrap" không hoạt động vì nó không cho phép tôi sử dụng các lớp css của bootstrap, thay vào đó nó cung cấp các thành phần tùy chỉnh. (http://github.com/valor-software/ng2-bootstrap)

Trong dự án Angular 2 của tôi, tôi đang sử dụng sass, liệu có thể xây dựng Bootstrap 4 từ mã nguồn không vì nó cũng sử dụng sass để tạo kiểu?

Câu trả lời #1

Bootstrap4 alpha cho Angular2 CLI (cũng hoạt động cho Angular4 CLI)

Nếu bạn đang sử dụng angular2 cli/angular 4 cli hãy làm theo các bước sau:

npm i bootstrap@next --save

Điều này sẽ thêm bootstrap 4 vào dự án của bạn.

Tiếp theo, hãy mở tệp src/style.scss hoặc src/style.css của bạn và nhập bootstrap vào đó:

Cho style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Cho style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Nếu bạn đang sử dụng scss, hãy chắc chắn rằng bạn đã thay đổi kiểu dáng mặc định của mình sang scss trong .angular-cli.json:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Các thành phần JS của Bootstrap

Để các thành phần JS của Bootstrap hoạt động, bạn vẫn cần phải nhập bootstrap.js vào .angular-cli.json dưới scripts (điều này nên xảy ra tự động):

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

Cập nhật 13/09/2017: Bootstrap 4 Beta hiện đang sử dụng popper.js thay vì tether.js. Vì vậy, tùy thuộc vào phiên bản bạn đang sử dụng, hãy nhập tether.js (alpha) hoặc popper.js (beta) trong các script của bạn. Cảm ơn đã nhắc nhở @MinorThreat

Câu trả lời #2

Các tùy chọn ở trên sẽ hoạt động, tuy nhiên tôi sử dụng phương pháp này thông qua NPM:

1. Đi tới: Bootstrap 4 và lấy lệnh npm

2. Chạy lệnh NPM nhận được từ bước 1 trong dự án của bạn, tức là

   npm install [email  --save

3. Sau khi cài đặt phụ thuộc trên, chạy lệnh npm sau đây sẽ cài đặt mô-đun bootstrap npm install --save @ng-bootstrap/ng-bootstrap Bạn có thể đọc thêm về điều này tại đây

4. Thêm import sau vào app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; và thêm NgbModule vào imports

5. Mô-đun ứng dụng của bạn sẽ trông như thế này:

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Add Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. Mở angular-cli.json và chèn một mục mới vào mảng styles :

   "styles": [
     "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

7. Mở src/app/app.component.html và thêm

   <alert type="success">hello</alert>
   

   hoặc nếu bạn muốn sử dụng cảnh báo ng thì hãy đặt những điều sau trên trang app.component.html của bạn

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. Bây giờ chạy dự án của bạn và bạn sẽ thấy thông báo cảnh báo bootstrap trên trình duyệt.

LƯU Ý: Bạn có thể đọc thêm về các Thành phần ng tại đây

Câu trả lời #3

Để sử dụng bất kỳ thư viện hình ảnh nào cần JQuery, chỉ cần làm như sau:

• Thêm thư viện CSS vào trong index;
• Thêm tệp js jquery vào index;
• Thêm các tệp thư viện js vào trong index;
• Cài đặt các tệp định nghĩa thư viện (d.ts);
• Cài đặt các tệp định nghĩa jquery (d.ts);

Nếu thư viện không có các tệp định nghĩa, bạn có thể:

• Tự tạo định nghĩa;
• Tạo một biến toàn cục bất kỳ với cùng tên của đối tượng thư viện, chỉ để không bị lỗi biên dịch;
• Sử dụng với lỗi (đây là lựa chọn tệ nhất);

Bây giờ bạn có thể sử dụng thư viện bên trong Typescript;