Question

我是Angular的新手，在使用ng模块时，在我的项目中集成ngx-bootstrap时遇到了问题...

更简单 - 当我在app.component.html中直接添加html但是当我在app- 组件中添加相同的代码时，一切都工作正常在app.component.html

中声明它

采取的步骤：

使用Angular CLI 1.7.4生成新项目（使用Angular 5.2.9）
在我的style.css中使用了npm install --save bootstrap ngx-bootstrap并导入了bootstrap.min.css
创建了一个名为＆＃39; app-bootstrap.module.ts＆＃39;的新模块。在src / app中，并包含以下内容：

＆＃13;

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
    
@NgModule({
    imports: [BsDropdownModule.forRoot()],
    exports: [BsDropdownModule]
})
export class AppBootstrapModule { }

＆＃13;

此时，如果我包含html代码，例如说下拉按钮在app.component.html中（在导入上面的模块之后），它按预期工作。但是，这不是我想要的，所以我采取了以下步骤。

在＆＃39;下拉菜单中创建了一个新组件。在src / app下，并在其中包含以下内容dropdown.component.html：

＆＃13;

<div class="btn-group" dropdown>
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
      Button dropdown
      <span class="caret"></span>
    </button>
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li role="menuitem">
        <a class="dropdown-item" href="#">Action</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Another action</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Something else here</a>
      </li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>

＆＃13;

在src / app中创建了一个名为custom-components.module.ts的模块，并在其中声明了dropdown组件：

＆＃13;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DropdownComponent } from './dropdown/dropdown.component';

@NgModule({
  imports: [CommonModule],
  declarations: [DropdownComponent],
  exports: [DropdownComponent]
})
export class CustomComponentsModule { }

＆＃13;

在customComponentsModule中导入app.module.ts，如下所示：

＆＃13;

//... Bootstrap and Components Modules
import { AppBootstrapModule } from './app-bootstrap.module';
import { CustomComponentsModule } from './custom-components.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CustomComponentsModule, //Custom Components
    AppBootstrapModule //Bootstrap Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

＆＃13;

在<app-dropdown></app-dropdown>

app.components.html

当我在这里运行ng serve时，按钮显示所有样式，但是当我点击它时，没有任何反应。如前所述，当我放下时，下拉列表有效app.component.html中的相同代码 - 这让我相信我没有得到一些范围问题。令人沮丧的是，没有出现任何错误。

注意：

我使用过＆＃39;下拉列表＆＃39;组件只是为了简洁起见。
如果我错过了添加重要的内容，请在评论中提出相同意见，我会提供。

为大职位道歉;任何帮助将不胜感激，谢谢！

了解Angular模块范围（适用于ngx-bootstrap）

0 个答案: