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

Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module

提问by Leon Gaban

Error

错误

compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden">

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

I have a NavbarComponent and a FooterComponent that I want to move into the SharedModule, to keep the root app.module cleaner.

我有一个 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

共享模块

However, once I moved those components into here, and update their paths correctly ./-> ../the app breaks.

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

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

导航栏.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();
  }
}

Then a couple of lines with the [ngbCollapse]in navbar.component.html

然后[ngbCollapse]在navbar.component.html中添加几行

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

I think this has something to do with the relative paths, any ideas?

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

回答by ConnorsFan

To use ng-bootstrapcomponents and directives in Angular templates, you need to import the NgbModule. In your case, you should import it in the SharedModule. Also, in order to use the shared components in other parts of the application, you should export them from the SharedModuleand import the SharedModulein the modules when the components are to be used.

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

shared.module.ts

共享模块.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

app.module.ts

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

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

Note: if you want to use ng-bootstrapcomponents and directives in templates outside of the SharedModule, you should add NgbModuleto the exportsof the SharedModule.

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