要在一个组件中注入另一个组件,需要使用Angular的依赖注入机制。以下是一个示例解决方法:
@Component
装饰器,并使用providers
属性将其注册为提供者。例如,我们有一个名为ComponentToInject
的组件:import { Component } from '@angular/core';
@Component({
selector: 'component-to-inject',
template: 'This is the component to inject
',
providers: [ComponentToInject]
})
export class ComponentToInject {
// 组件的逻辑代码
}
constructor
中的参数来注入组件实例。例如,我们有一个名为InjectingComponent
的组件:import { Component } from '@angular/core';
import { ComponentToInject } from './component-to-inject.component';
@Component({
selector: 'injecting-component',
template: 'This is the injecting component
',
})
export class InjectingComponent {
constructor(private componentToInject: ComponentToInject) {
// 使用注入的组件实例进行逻辑处理
}
}
declarations
数组的一部分,并在imports
数组中导入ComponentToInject
组件。例如,我们有一个名为AppModule
的模块:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ComponentToInject } from './component-to-inject.component';
import { InjectingComponent } from './injecting-component.component';
@NgModule({
declarations: [
AppComponent,
ComponentToInject,
InjectingComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当使用InjectingComponent
时,ComponentToInject
将被注入,并且可以在InjectingComponent
中使用。