获取“ngbCollapse”，因为它不是“div”的已知属性。将组件移动到子模块后出错

Posted 2023-03-13

【中文标题】获取“ngbCollapse”，因为它不是“div”的已知属性。将组件移动到子模块后出错

【英文标题】：Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module

【发布时间】：2019-02-15 07:10:28

【问题描述】：

错误

compiler.js:215 未捕获错误：模板解析错误： 无法绑定到“ngbCollapse”，因为它不是“div”的已知属性。 ("][ngbCollapse]="isHidden">

我有一个 NavbarComponent 和一个 FooterComponent 我想移动到 SharedModule 中，以保持根 app.module 更清洁。

app.module

import  AdminComponent  from './admin/admin.component';
// import  NavbarComponent  from './navbar/navbar.component';
// import  FooterComponent  from './footer/footer.component';

// Modules
import  DashboardModule  from './dashboard/dashboard.module';
import  HomeModule  from './home/home.module';

@NgModule(
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    PasswordResetComponent,
    ResetPasswordComponent,
    AdminComponent,
    // NavbarComponent,
    // FooterComponent,

share.module

但是，一旦我将这些组件移到此处，并正确更新它们的路径./ -> ../ 应用程序就会中断。

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

import  NavbarComponent  from '../navbar/navbar.component';
import  FooterComponent  from '../footer/footer.component';
import  TermsComponent  from './terms.component';
import  PageNotFoundComponent  from './not-found.component';
import  PrivacyPolicyComponent  from './privacy-policy.component';

@NgModule(
  imports: [
    CommonModule
  ],
  declarations: [
    NavbarComponent,
    FooterComponent,
    TermsComponent,
    PageNotFoundComponent,
    PrivacyPolicyComponent
  ]
)
export class SharedModule  

navbar.component.ts

import  Component, OnInit  from '@angular/core';
import  AuthService  from '../auth.service';
import  environment  from '../../environments/environment';

@Component(
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
)
export class NavbarComponent implements OnInit 
  isHidden = true;
  oauthUrl = this.authService.generateOauthUrl();

  constructor(public authService: AuthService)  

  ngOnInit() 
  

  logout() 
    sessionStorage.clear();
  

然后在 navbar.component.html

中添加几行 [ngbCollapse]

<div *ngIf="!authService.isLoggedIn()" class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isHidden">

我认为这与相对路径有关，有什么想法吗？

【问题讨论】：

你在使用ng-bootstrap吗？如果是这样，请将NgbModule 添加到SharedModule 的导入部分。

@ConnorsFan 啊，谢谢！是的，就是这样:) 现在我得到了一个不同的错误'app-navbar' is not a known element:，但这是一个不同的问题，是否愿意发布完整的答案？我确实忘记在新的 shared.module 中导入它。

对于第二个错误，您可能需要将共享组件（例如NavbarComponent）添加到SharedModule的exports，并在模块中导入SharedModule实际使用的组件。

嗯，我正在导入NavbarComponent，并在上面的代码中导出SharedModule，还是我错过了其他地方？

【参考方案1】：

要在 Angular 模板中使用 ng-bootstrap 组件和指令，您需要导入 NgbModule。在您的情况下，您应该将其导入SharedModule。另外，为了在应用程序的其他部分使用共享组件，您应该将它们从SharedModule导出，并在要使用组件时导入模块中的SharedModule。

shared.module.ts

...
import  NgbModule  from '@ng-bootstrap/ng-bootstrap';

@NgModule(
  imports: [
    CommonModule,
    NgbModule
  ],
  declarations: [
    NavbarComponent,
    FooterComponent,
    TermsComponent,
    PageNotFoundComponent,
    PrivacyPolicyComponent
  ],
  exports: [
    NavbarComponent,
    FooterComponent,
    TermsComponent,
    PageNotFoundComponent,
    PrivacyPolicyComponent
  ]
)
export class SharedModule  

app.module.ts

import  SharedModule  from './shared/shared.module';
...

@NgModule(
  imports: [
    SharedModule,
    ...
  ],
  ...
)

注意：如果你想在SharedModule之外的模板中使用ng-bootstrap组件和指令，你应该将NgbModule添加到SharedModule的exports中。

【讨论】：

关于出口数组的问题:)

【参考方案2】：

要使用 ng-bootsrap，您应该首先添加此依赖项：

ng 添加@ng-bootstrap/ng-bootstrap

来源：https://ng-bootstrap.github.io/#/home

然后导入模块如下：

   import  NgbModule  from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule(
      imports: [
        CommonModule,
        NgbModule
      ],
...