ng2-bootstrap không làm việc trong góc 2 ('cảnh báo' không phải là một yếu tố được biết đến :)

Question

Tôi đã cài đặt ng2-bootstrap trên một dự án chạy 2.0.1 góc qua:

npm install ng2-bootstrap --save 

tôi đã thiết lập dự án của tôi như thế này:

//systemjs.config.js 
    (function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      'moment': 'node_modules/moment/moment.js', 
      'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 

Và:

// app.module.ts 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { AppComponent } from './app.component'; 
import { ClientModule } from './client/client.module'; 

@NgModule({ 
    imports: [ 
     Ng2BootstrapModule 

    ], 
    declarations: [ 
     AppComponent 
    ], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 
    providers: [ 
     NotificationService, 
     { provide: LocationStrategy, useClass: HashLocationStrategy } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Và:

// client.module.ts 
import { Ng2BootstrapModule } from 'ng2-bootstrap'; 

@NgModule({ 
    imports: [ 
     Ng2BootstrapModule 
    ], 
    declarations: [ 

    ], 
    providers: [ 

    ] 
}) 
export class ClientModule { } 

và cuối cùng là:

// client-info.component.ts 
import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: 'client-info', 
    template: ` 
    <div > 
     <alert type="success">hello</alert> 
    </div> 
    `, 
    styleUrls: ['app/client/client.css'] 
}) 

export class ClientInfoComponent { 
    constructor() { 

    } 

    ngOnInit(): void { } 

    ngOnDestroy(): void { 

    } 
} 

Nhưng khi duyệt trang web tôi nhận được lỗi sau:

Unhandled Promise rejection: Template parse errors: 'alert' is not a known element: 1. If 'alert' is an Angular component, then verify that it is part of this >module. 2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the >'@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]hello

Tôi rõ ràng là làm điều gì đó sai ở đây nhưng những gì?

Answer 1

Bạn app.module.ts phải như thế này. Nó giúp tôi.

// app.module.ts 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { ClientModule } from './client/client.module'; 
import { AlertModule } from 'ng2-bootstrap/components/alert'; 

@NgModule({ 
    imports: [ 
     Ng2BootstrapModule, 
     AlertModule 

    ], 
    declarations: [ 
     AppComponent 
    ], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 
    providers: [ 
     NotificationService, 
     { provide: LocationStrategy, useClass: HashLocationStrategy } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Và thay đổi client-info.component.ts này

// client-info.component.ts 
    import { Component, OnInit, OnDestroy } from '@angular/core'; 
    import { AlertModule } from 'ng2-bootstrap/components/alert'; 


    @Component({ 
     selector: 'client-info', 
     template: ` 
     <div > 
      <alert type="success">hello</alert> 
     </div> 
     `, 
     styleUrls: ['app/client/client.css'] 
    }) 

    export class ClientInfoComponent { 
     constructor() { 

     } 

     ngOnInit(): void { } 

     ngOnDestroy(): void { 

     } 

} 

Answer 2

Câu trả lời của dilvish.john làm việc cho tôi, ngoại trừ trong component.ts của tôi, tôi đã phải đặt

import { AlertModule } from 'ng2-bootstrap/alert';

Nhưng tôi không hiểu logic đằng sau: tại sao trong app.module, chúng tôi phải nhập 'ng2-bootstrap/ng-2bootstrap' và trong thành phần chúng tôi phải nhập 'ng2-boots bẫy/cảnh báo '?

1- không phải là Ng2BootstrapModule có sẵn cho tất cả các thành phần kể từ khi chúng tôi nhập nó trong app.module? và do đó AlertModule nên có sẵn mà không chỉ định nó một cách rõ ràng

2- và nếu chúng ta nên làm điều đó một cách rõ ràng trong các thành phần, không nên chúng tôi sử dụng import from 'Ng2BootstrapModule/alert'?

Cảm ơn bạn,