首页 文章

如何在Typescript中扩展组件，并找出所需的参数？使用案例：角度 - 扩展mat-side-nav

提问于
浏览 次
0

Background:

Angular Material Design mat-side-nav component的动力学是这样的，它需要以下结构：

<mat-sidenav-container>
  <mat-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

<mat-sidenav> 和 <mat-sidenav-content> 必须是 <mat-sidenav-container> 父组件的直接后代 . 因此，如果我想在应用程序中创建可重复使用的侧面导航，并使用特定的列表项，我将不得不执行以下操作：

<mat-sidenav-container>
  <mat-sidenav>
   <app-sidenav></app-sidenav><!--I've just been added-->
  </mat-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Attempted Solution:

因此，我试图在我的app-sidenav组件中扩展 <mat-sidenav> 组件，因此可以在整个应用程序中轻松地重复使用它，例如：

export class SideNavComponent extends MatSidenav implements AfterContentInit { 
//..

constructor() {
  super();
}

这样我就可以做到：

<mat-sidenav-container>
  <app-sidenav> <!--I'm now here instead of <mat-sidenav> -->
  </app-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Issue: 在尝试扩展MatSidenav时，typescript编译器会抱怨 error TS2554: Expected 6 arguments, but got 0. .

Question:

  • 为什么通过扩展MatSideNav，我现在需要6个参数？

  • 在这种情况下，有没有办法让我找出这6个参数是什么，以及其他类似的打字稿情况应该是什么？

谢谢，任何建议都非常感谢 .

javascript angular typescript oop angular-material2

1 回答

  • 2

    你需要这6个参数 . 您可以在Angular Material2的代码源中检查它们 . 至于为什么，这是一个基本的遗产规则 . 当你调用super时，你基本上调用了父类的构造函数（在这种情况下需要6个参数）

    private _elementRef: ElementRef,
              private _focusTrapFactory: FocusTrapFactory,
              private _focusMonitor: FocusMonitor,
              private _platform: Platform,
              private _ngZone: NgZone,
              @Optional() @Inject(DOCUMENT) private _doc: Document
    回复于

相关问题