ngbAccordion class 未使用 ng2-bootstrap 定义

Question

我正在尝试使用 Angular 2 和 ng2-bootstrap 实现简单的手风琴风格。我使用 Angular2 Quickstart 文件作为起点并修改文件以添加 ng2-bootstrap、bootstrap.css。下面列出了 index.html、app.module.ts、app.component.ts 和 app.component.html 文件。 ng2-bootstrap 'Alert' 正常运行，但我收到 'Accordion' 元素的以下错误：

zone.js:420 Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("
<br> ......

关于错误原因和可能的修复方法有什么想法吗？

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <link rel="stylesheet" href="styles.css">

    <!-- Import bootstrap here -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AlertModule } from 'ng2-bootstrap';
import { AccordionModule } from 'ng2-bootstrap';

import { AppComponent }  from './app.component';

@NgModule({

  imports:      [ 
    BrowserModule,
    AlertModule.forRoot(),
    AccordionModule.forRoot()
     ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

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

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

app.component.html

<h1>Hello {{name}}</h1>
<alert type="success" dismissible="true">
    Well Done!
</alert>
<br>

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple">
    <template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </template>
  </ngb-panel>
  <ngb-panel>
    <template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </template>
    <template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </template>
  </ngb-panel>
  <ngb-panel title="Disabled" [disabled]="true">
    <template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </template>
  </ngb-panel>
</ngb-accordion>

Answer 1

我猜你把事情弄糊涂了...

您正在导入 ng2-bootstrap 库并尝试使用 ng-bootstrap 组件。

见ng2-bootstrap#accordion and ng-bootstrap#accordtion。

ngbAccordion class 未使用 ng2-bootstrap 定义

ngbAccordion class not defined with ng2-bootstrap

angular2-directives

ng2-bootstrap

angular