如何在非独立组件中使用独立组件？

Question

我有一个独立组件，我想在非独立组件中使用它，但又不想使该组件独立。这可能吗？我尝试了各种方法但总是出错。

我有这个组件

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

@Component({
  selector: 'app-three-d-viewer',
  standalone: true,
  templateUrl: './three-d-viewer.component.html',
  styleUrls: ['./three-d-viewer.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ThreeDViewerComponent {

}

我想使用我的

app.component

，它是一个非独立组件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
}

我想在这里使用它

<div class="layout">
  <app-three-d-viewer></app-three-d-viewer>
</div>

这是我的

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我收到此错误

Error: src/app/app.component.html:2:3 - error NG8001: 'app-three-d-viewer' is not a known element:
1. If 'app-three-d-viewer' is an Angular component, then verify that it is part of this module.
2. If 'app-three-d-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2   <app-three-d-viewer></app-three-d-viewer>
    ~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

我尝试的是：

1. 使用

   ThreeDViewerComponent

   在

   AppComponent

   非独立组件

   imports: [ThreeDViewerComponent]

   中导入独立组件，但出现错误

   Error: src/app/app.component.ts:8:12 - error NG2010: 'imports' is only valid on a component that is standalone.

2. 使用

   shared.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ThreeDViewerComponent } from './path/to/three-d-viewer.component';

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

并将其导入

AppModule

但我收到此错误：

Error: src/app/app.module.ts:14:5 - error NG6002: This import contains errors, which may affect components that depend on this NgModule.

14     SharedModule
       ~~~~~~~~~~~~


Error: src/app/shared.module.ts:6:18 - error NG6008: Component ThreeDViewerComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

6   declarations: [ThreeDViewerComponent],
                   ~~~~~~~~~~~~~~~~~~~~~


Error: src/app/shared.module.ts:8:13 - error NG6004: Can't be exported from this NgModule, as it must be imported first

8   exports: [ThreeDViewerComponent]
              ~~~~~~~~~~~~~~~~~~~~~




× Failed to compile.

我能做什么？

Answer 1

独立组件，无法在独立时声明，因此需要在模块上导入，无论是顶级模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { ThreeDViewerComponent } from './path/to/three-d-viewer.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ThreeDViewerComponent, // <- changed here!
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

或者您可以将其导入到共享模块中，唯一的是，您还必须将其导出，以便它在导入

SharedModule

！

的所有组件中都可见

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ThreeDViewerComponent } from './path/to/three-d-viewer.component';

@NgModule({
  declarations: [],
  imports: [CommonModule, ThreeDViewerComponent], // <- changed here!
  exports: [ThreeDViewerComponent]
})
export class SharedModule {}