gpt4 book ai didi

javascript - 获取 'ngbCollapse' 因为它不是 'div' 的已知属性。将组件移入子模块后出错

转载 作者:数据小太阳 更新时间:2023-10-29 04:13:10 25 4
gpt4 key购买 nike

错误

compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of '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">

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

最佳答案

要在 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

关于javascript - 获取 'ngbCollapse' 因为它不是 'div' 的已知属性。将组件移入子模块后出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52264749/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com