typescript 是否可以在没有显式导入的情况下从Angular中的共享模块继承基类

hrirmatl 于 2023-02-05 发布在 TypeScript

关注(0)|答案(2)|浏览(120)

在我的项目中，有许多"基本"组件类，而且，项目将被划分为几个其他模块，在这些模块中，我只想使用共享模块作为基本类源。
我希望可以在app.module中只使用一个简单的import { SharedModule }声明，避免在组件后代中导入许多基本组件类，但是发生了错误。
（我对这个问题进行了编辑，使其更加精确。）
示例：

// base.component.ts
@Component({ selector: 'app-base', ...})
export class BaseComponent {}

// shared.module.ts
import { CommonModule } from '@angular/common';
import { BaseComponent } from './base/base.component';

@NgModule({
  imports: [CommonModule],
  declarations: [BaseComponent],
  exports: [BaseComponent],
})
export class SharedModule {}

// app.module.ts
import { HelloComponent } from './hello.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [..., SharedModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

我知道这是可行的（但不是我的预期用途）：

// hello.component.ts
@Component({ template: `<app-base></app-base>` })
export class HelloComponent {}

我也以为会有用，但没用：

// hello.component.ts
@Component({...})
export class HelloComponent extends BaseComponent {} // <-- Cannot find name 'BaseComponent'

angular是否允许以上述简单的方式使用基类？（即每个组件后代中没有import { BaseComponent }）

typescript

来源：https://stackoverflow.com/questions/75291573/is-it-possible-to-inherit-base-class-from-shared-module-in-angular-without-expli

2条答案

按热度按时间

5m1hhzi41#

首先，使用sharedModule通常是一个陈旧的不良做法，最好使用SCAM（单组件Angular 模块）或独立组件。
不管怎样，如果你想扩展BaseComponent，你可以这样做，但是如果你不打算使用BaseComponent本身，你必须将它导入import { BaseComponent } from './base/base.component';，不需要在任何模块中声明它，你只需要声明HomeComponent

赞(0）回复(0）举报 2023-02-05

9w11ddsr2#

查看this完整教程。
将共享模块中的组件用作子组件中的基类：
在“child.component.ts”文件中，使用extends关键字扩展基本组件：

import { Component } from '@angular/core';
import { BaseComponent } from '../shared/base/base.component';

@Component({
  selector: 'app-hello',
  template: `
    <app-base></app-base>
    <p>Hello Component works!</p>
  `
})
export class HelloComponent  extends BaseComponent {
  constructor() {
    super();
  }
}

确保您使用的是相应模板文件中父零部件的选择器。
在模板中的任意位置使用hello组件：在要使用hello组件的模板中，使用hello组件的选择器包括hello组件：

<app-hello></app-hello>

赞(0）回复(0）举报 2023-02-05

我来回答

typescript 是否可以在没有显式导入的情况下从Angular中的共享模块继承基类

2条答案

相关问题

热门标签

最新问答