ng2-bootstrap在Angular 2中不起作用(‘alert’不是已知元素:)
发布时间:2020-12-18 00:29:04 所属栏目:安全 来源:网络整理
导读:我通过以下方式在运行Angular 2.0.1的项目上安装了ng2-bootstrap: npm install ng2-bootstrap --save 我设置了这样的项目: //systemjs.config.js (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' },// ma
我通过以下方式在运行Angular 2.0.1的项目上安装了ng2-bootstrap:
npm install ng2-bootstrap --save 我设置了这样的项目: //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 和: // 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 { } 和: // client.module.ts import { Ng2BootstrapModule } from 'ng2-bootstrap'; @NgModule({ imports: [ Ng2BootstrapModule ],declarations: [ ],providers: [ ] }) export class ClientModule { } 最后: // 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 { } } 但在浏览网站时,我收到以下错误:
我显然在这里做错了但是什么? 解决方法
app.module.ts应该是这样的.它对我很有帮助.
// 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 ],bootstrap: [AppComponent] }) export class AppModule { } 并将client-info.component.ts更改为此 // client-info.component.ts import { Component,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 { } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 如何在AngularJS中使用属性前缀“x-”和“data-”
- 什么时候为Scala actor创建线程的反应?
- 【数据结构】 CF 547B Mike and Feet
- Unix上的Java默认JRE参数
- angularjs – bower ENOTFOUND Package App States = bower
- AngularJS--给video标签赋值播放不了
- scala – 用于聊天和类似Twitter的应用程序的并发程序语言
- angularjs – 如何使用ngdoc将控制器放入模块中
- angularjs – angular ngChange变体,当用户完成输入时
- 单元测试 – 如何在angularjs单元测试中触发keyup/keydown事