标签: ng-bootstrap

我在 ng-bootstrap 中使用 ngb-accordion。切换标头会导致其子组件重新初始化。例如，切换标题会导致下拉列表重置。看起来这是因为<div class="card-block"></div>在隐藏面板时被删除。

即使组件“隐藏”在手风琴中，我如何保持组件的状态？

模板文件：

<ngb-accordion activeIds="side-bar-accordion-1" (panelChange)="beforeChange($event)">

  <div [class.hide-card-block]="status">
  <ngb-panel id="side-bar-accordion-1" class="foo">
    <template ngbPanelTitle>
        <div class="title">Axes</div>
    </template>
    <template ngbPanelContent>
        <!--This is the component whose state I want to maintain:-->
        <side-bar-axes></side-bar-axes>
    </template>
  </ngb-panel>
  </div>

  <ngb-panel id="side-bar-accordion-2">
    <template ngbPanelTitle>
      <div class="title">Fancy</div>
    </template>
    <template ngbPanelContent>
      blah blah
    </template>
  </ngb-panel>

  <ngb-panel id="side-bar-accordion-3">
    <template ngbPanelTitle>
        <div class="title">Settings</div>
    </template>
    <template ngbPanelContent>
      blah blah
    </template>
  </ngb-panel>

</ngb-accordion>

组件打字稿文件：

import { Component, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap'; …

我正在打字稿文件中进行以下两次导入：

import { DOCUMENT } from '@angular/platform-browser';
import { Positioning } from '@ng-bootstrap/ng-bootstrap';

第一条语句有效，但是编译器抱怨第二条语句（ng-bootstrap导入）：

src/app/extensions/angular-calendar/directives/calendarTooltip.directive.ts(19,10): error TS2305: Module '"/Users/gg/OneDrive/Studies/Node/timely-frontend/node_modules/@ng-bootstrap/ng-bootstrap/index"' has no exported member 'Positioning'.

我已经安装了ng-bootstrap。我不确定这可能是什么原因。

以下是我的tsconfig.json文件：

{
  "compilerOptions": {
    "outDir": "build/app",
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "gulpfile.ts",
    "node_modules"
  ]
}

我安装的ng-bootstrap：

gg:timely-frontend gaurav$ tree node_modules/@ng-bootstrap/ng-bootstrap
node_modules/@ng-bootstrap/ng-bootstrap
??? README.md
??? accordion
?   ??? accordion-config.d.ts
?   ??? accordion-config.js
?   ??? accordion-config.js.map
?   ??? accordion-config.metadata.json
?   ??? accordion.d.ts
? …

我不知道这在 Angular 2/4 中是否可能。我有一个模态组件，它又具有一个模态内容组件。我还有一项允许打开/关闭模式实例的服务。我正在使用 ngbModal。

模态内容模板需要根据布尔参数显示/隐藏一些字段。

我的页面组件有一个按钮，单击该按钮需要使用布尔参数打开 modalInstance。

这就是我所拥有的，

页面.组件.html

 <div class="bar-sec">
   <action-bar [options]="btnOpts" (select) = 
      "actionBarSelectHandler($event)">
   </action-bar>
</div>
<div class="grid-sec">
</div>
 **<app-ad-search [userOnly]='userOnly'></app-ad-search>**

页面组件.ts

 import {Component, ViewChild} from '@angular/core';
 import { NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap';
 import { SearchModalComponent} from '../../X/search-modal.component';
 import { SearchContentComponent} from '../../X/search-content.component';
 import { XModalService} from '../../X/x-modal.service';

@Component ({
  selector: 'page-test',
  templateUrl: './page.component.html',
  providers: [XModalService]
})

 export class VCenterMachinesComponent {
   XModalService: XModalService;
   filterText: String = '';
   machines: any[];
   btnOpts: {};
   **userOnly:boolean = true;**

  **@ViewChild(SearchModalComponent) private 
       SearchModalComponent:SearchModalComponent;** …

我想在ngb-tab中设置标题的样式，使其不是锚标记的默认蓝色。理想情况下是这样的，但是class属性似乎对ngb-tab没有影响。

HTML：

<ngb-tabset #t="ngbTabset">
    <ngb-tab [title]="'Followers'" class="tab-title">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
    <ngb-tab [title]="'Following'" class="tab-title">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
</ngb-tabset>

CSS：

.tab-title {
  color: inherit;
}

我在Angular 4项目中使用ng-bootstrap框架.

我的应用程序中有多个位置的'accordion'组件,在某些情况下我需要在打字稿中触发手风琴打开状态.

从手风琴组件API文档中我发现了以下方法,但据我所知,它仅在html文件中调用时(尝试从构造函数调用).

//Programmatically toggle a panel with a given id.
toggle(panelId: string) => void

是否也可以触发打字稿？如果有人有经验,我会非常感激.否则我需要建立自己的定制手风琴.

我希望使用 ng-bootstrap。

文档要求安装 bootstrap CSS 作为依赖，但不包括 jQuery

如果我使用 npm 安装 bootstrap，我会收到警告说它需要 jquery 和 popper。

$ npm i -S bootstrap
npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.

有没有办法在我的项目中安装 bootstrap css 而不添加不需要的对等依赖项？

在这里，我尝试使用ng-bootstrap日期选择器以编程方式设置日期

我试过这样的事情，把自定义日期

this.model= {
  "year": 2018,
  "month": 8,
  "day": 15
}

我知道这不是有效的方法，有一个问题是在选择日期选择器后没有导航到该特定月份。

假设如果我选择 2nd jan 2018 那么它也停留在当月它不会移动到 jan。我该如何解决这些问题？

下面是我的代码和堆栈闪电战链接

.ts 代码

model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar){

  }

   selectToday() {
    this.model = this.calendar.getToday();
  }

  select(){
    this.model= {
  "year": 2018,
  "month": 8,
  "day": 15
}

.html 文件

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

我正在使用 Anuglar 6

我有两个组件account和profile. account组件被添加到app-component。

我想通过单击account-component中的按钮打开profile -component。

但这给了我一个错误

Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents?

该应用程序模块的样子

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, AccountComponent, ProfileComponent ],
  entryComponents: [
    ProfileComponent
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这是工作示例：https : //stackblitz.com/edit/angular-uwobqm

我正在查看ng-bootstrap的官方文档，在某些官方示例中，代码无法正常工作。特别是我讲的这个和这个例子中，当你在stackblitz打开它们。这使我很难理解代码的工作方式，因此我可以用自己的方式实现它。

我已经看到了这个问题，但答案已经过时，因为它是针对angularjs的。

所以现在我的问题是：

1. 我如何能实现NG-引导4表格排序，分页和过滤如图所示这里？给定代码有什么问题，为什么不起作用？

一个有效的示例将非常有用，因为它将帮助我了解和理解代码的工作原理。谢谢。

我有一个使用 ngFor 显示数据的表格。我需要在单击时以模态显示单个行数据。我可以通过将行作为 click 参数传递来将其记录在控制台中，但无法将其传递到模态中。

假设正在从服务中获取表数据，并且模态是与表位于同一组件文件中的模板引用。

这是创建的小提琴 https://stackblitz.com/edit/angular-xr8ud5

我使用了 angular 1.x 并且数据是通过解析传递的。我是 Angular 的新手，从未在 ngBootstrap 中工作过。

任何帮助表示赞赏。谢谢