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 lib并尝试使用ng-bootstrap组件。

请参阅ng2-bootstrap#accordion和ng-bootstrap#accordtion。

ngbAccordion类未使用ng2-bootstrap

1 个答案: