Offcanvas 组件不起作用，内容不显示

Question

希望你一切都好！

我给你一个挑战:)。我正在尝试在我的 Angular 项目中实现 Offcanvas 组件，它看起来可以工作，但是当我激活该组件时，仅显示阴影效果，而不显示内容。 我正在使用 ng-bootstrap v13.1.0 和 Angular[这里是我激活组件时的阴影效果]()内容。

我已经使用了 ng-bootsrap Modal 组件并且它可以工作。所以我认为引导程序和角度之间的版本兼容性不是问题。

我已经检查了 app.module.ts 中的正确导入

其实我不知道是否需要路由

而且代码似乎是正确的。

你对为什么它不起作用有什么建议吗？

这是我的组件：

import { Component, OnInit,  Input } from '@angular/core';

import { NgbActiveOffcanvas, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-trainer-dropdown-menu-content',
  template:
    `
      <div class="offcanvas-start">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Offcanvas</h5>
      <button
                type="button"
                class="btn-close text-reset"
                aria-label="Close"
                (click)="activeOffcanvas.dismiss('Cross click')"
            ></button>
        </div>
        <div class="offcanvas-body">

            <button type="button" class="btn btn-outline-dark" (click)="activeOffcanvas.close('Close click')">Close</button>
        </div>
    </div>
    `

})

export class TrainerDropdownMenuContent{



  @Input() name: any;


  ngOnInit(): void {

  }


  constructor(public activeOffcanvas: NgbActiveOffcanvas) {}


}



@Component({
  selector: 'app-trainer-dropdown-menu',
  templateUrl: './trainer-dropdown-menu.component.html',
  styleUrls: ['./trainer-dropdown-menu.component.css']
  // providers: [NgbOffcanvasConfig, NgbOffcanvas],

})
export class TrainerDropdownMenuComponent implements OnInit{




  constructor( private offcanvasService: NgbOffcanvas) {

  }

  ngOnInit(): void {

  }



  open() {
    const offcanvasRef = this.offcanvasService.open(TrainerDropdownMenuContent);
    offcanvasRef.componentInstance.name = 'World';
  }

}

谢谢:)

Answer 1

在我的情况下，this.offcanvasService.open之后的显示类似乎没有覆盖.offcanvas类的隐藏CSS属性..所以我覆盖了.offcanvas.show

Answer 2

我也面临着同样的问题。我已经用这个 CSS 解决了这个问题：

.offcanvas.show {
  z-index: 99999;
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none !important;
}