javascript - 将ng-bootstrap添加到Angular应用不会对HTML控件产生影响

我最近尝试使用Angular应用将ng-bootstrap添加到我的asp.net mvc中。
我按照ng-bootstrap上的步骤进行操作，但无法正常工作。控件看起来像纯HTML（就像我根本没有使用ng-boostrap一样）
我将不胜感激任何帮助。

主要

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': '/src/app',

            // angular bundles
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'tslib': 'npm:tslib/tslib.js',
            'bootstrap':                  'node_modules/bootstrap/dist/js/bootstrap.min.js',
            'jquery':                     'node_modules/jquery/dist/jquery.js',

            '@progress': 'npm:@progress',
            '@telerik': 'npm:@telerik'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js',
                meta: {
                    './*.js': {
                        loader: '/src/systemjs-angular-loader.js'
                    }
                }
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }  from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, NgbModule.forRoot()],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent {}

app.component.html

<div class="row">
    <div class="col">
        <h1>Angular</h1>
        <div ngbDropdown class="d-inline-block">
            <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button class="dropdown-item">Action - 1</button>
                <button class="dropdown-item">Another Action</button>
                <button class="dropdown-item">Something else is here</button>
            </div>
        </div>
    </div>
</div>

最佳答案

根据ng-bootstrap documentation，您不应在项目中包含bootstrap.min.js和jQuery，因为


  这不是必需的，并且可能会干扰ng-bootstrap代码。


但是主要问题是您没有在App模块声明中包含NgbdDropdownBasic：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }  from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdDropdownBasic } from './dropdown-basic'; // this

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, NgbModule.forRoot()],
  declarations: [ AppComponent, NgbdDropdownBasic ], // and this
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

每个ng-bootstrap实体都应单独包含。要使用Datepicker？包括NgbdDatepickerBasic，依此类推...

关于javascript - 将ng-bootstrap添加到Angular应用不会对HTML控件产生影响，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47677618/