Question

我正在尝试为我的Angular 2项目添加手风琴。我想我做了所有必要的改变。但仍然没有看到手风琴。谁能告诉我我失踪了什么？

的package.json

...
dependencies: {
   "@angular/common": "2.0.0",
   "@angular/compiler": "2.0.0",
   "@angular/core": "2.0.0",
   "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
   "bootstrap": "4.0.0-alpha.4",
}
...

应用程序/共享/ NGB-手风琴/ accordion.ts

import { Component, ViewEncapsulation, ViewChild, OnInit, ElementRef } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'sse-accordion',
    templateUrl: './accordion.html'
})

export class Accordion implements OnInit {
    panelOneTitle: string = 'Device';
    panelTwoTitle: string = 'Connector';

    @ViewChild('acc') acc: NgbModule;

    ngOnInit(): void {

    }
}

应用程序/共享/ NGB-手风琴/ accordion.html

<div>
    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
        <ngb-panel title="{{panelOneTitle}}">
            <ng-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.
            </ng-template>
        </ngb-panel>
        <ngb-panel>
            <ng-template ngbPanelTitle>
            <span>&#9733; <b>Fancy</b> title &#9733;</span>
            </ng-template>
            <ng-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.
            </ng-template>
        </ngb-panel>
        <ngb-panel title="Disabled" [disabled]="true">
            <ng-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.
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
</div>

嵌入手风琴的父组件：应用程序/电影/动画detail.ts

import { Accordion } from '../shared/ngb-accordion/accordion';

@Component({
    selector: 'movie-dialog',
    template: require('./movie-detail.html'),
    encapsulation: ViewEncapsulation.None,
    styles: [require('./movie-detail.scss')]
})

export class MovieDetail {

    @ViewChild('detailPanel') detailPanel: Accordion;
    ngOnInit(): void {
        // detailPanel.panelTitle = service.movie.title;
    }
}

app/movies/movie-detail.html

    <div>
        <div><accordion></accordion></div>
    </div>

共享/ shared.module.ts

@NgModule({
imports: [
    NgbModule,
],
declaration: [Accordion]

})

如何在Angular项目中使用NgbAccordion

0 个答案: