为什么我会收到此绑定错误？错误 NG8002：无法绑定到"ngbCollapse"，因为它不是 'div' 的已知属性

Question

我正在尝试使用angular和bootstrap制作一个可折叠的菜单栏。我有以下代码。我已经从本链接中提供的响应导航栏主题下的代码中获得了帮助https://ng-bootstrap.github.io/#/components/collapse/examples#navbar.

我的abc.html

<nav class="navbar navbar-expand-lg navbar-dark">
<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div [ngbCollapse]="isCollapsed" class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="'.'" (click)="isCollapsed = true" href="#"><i class="fa fa-home fa-lg"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'.'" (click)="isCollapsed = true" href="#">cli1</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'.'" (click)="isCollapsed = true" href="#">cli2</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'.'" (click)="isCollapsed = true" href="#">cli3</a>
</li>
<li class="nav-item pl-lg-3">
<button *ngIf="!isAuthenticated" (click)="oktaAuth.loginRedirect()" class="btn btn-outline-primary">Login</button>
<button *ngIf="isAuthenticated" (click)="oktaAuth.logout()" class="btn btn-outline-secondary">Logout</button>
</li>
</ul>
</div>
</nav>

我的abc.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-abc',
templateUrl: './abc.component.html',
styleUrls: ['./abc.component.css']
})
export class abcComponent implements OnInit {
constructor(public router:Router) { }
isAuthenticated: boolean;
public isCollapsed = true;
ngOnInit(): void {
}
}

我的abc模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { abcRoutingModule } from './abc-routing.module';
import { abcComponent } from './abc.component';
@NgModule({
declarations: [abcComponent],
imports: [
CommonModule,
abcRoutingModule,
NgbModule
]
})
export class abcModule { }

编译后，我得到了以下错误：

error NG8002: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'.

<div [ngbCollapse]="isCollapsed" class="collapse navbar-collapse" id="navbarSupportedContent">

Answer 1

这不是一个答案，而是对"；显式标识符"；。

为了指示Angular我们的div是ngCollapse，我们需要添加[ngbCollapse]

模拟ngb折叠

1. 使用toogle 方法

   <p>
   <button type="button" class="btn btn-outline-primary"
   (click)="collapse.toggle()" 
   [attr.aria-expanded]="!collapse.collapsed"
   aria-controls="collapseExample">
   Toggle
   </button>
   </p>
   <div [ngbCollapse] #collapse="ngbCollapse">
   <div class="card">
   <div class="card-body">
   You can collapse this card by clicking Toggle
   </div>
   </div>
   </div>
   

2. 使用可变

   <button type="button" class="btn btn-outline-primary"
   (click)="isCollapsed=!isCollapsed"
   [attr.aria-expanded]="!isCollapsed" 
   aria-controls="collapseExample">
   Toggle
   </button>
   </p>
   <div [ngbCollapse]="isCollapsed" >
   <div class="card">
   <div class="card-body">
   You can collapse this card by clicking Toggle
   </div>
   </div>
   </div>
   

请注意，在这两种情况下，都包含在div[ngbCollapse]中。这向Angular表明；div"；不仅仅是一个htmlElement(而且，它是一个ngbCollapse(。

当您想要使用ngbCollapse方法时，您需要向Angular指示模板引用变量(#collapse(是ngbCollaapse(您编写#collapse="ngbCollapse"，可以使用collapse.toogle()和collapse.collapsed

如果你使用一个变量，你不需要使用模板引用变量，并用变量控制所有变量

堆叠式

在这个例子中，将这两个概念混合在一起(并使用bannana sintax-[(ngbCollapsed(]uneccessary-(。bannana语法CCD_ 7仅用于给变量"0"赋值；是Collpased"；当我们制作collapse.toggle()时，我们可以更清楚地看到是否以的方式拆分bannana语法

<div #collapse="ngbCollapse" [ngbCollapse] 
(ngbCollapse)="isCollapsed=$event">