angular 如何将组件导入另一个组件

Question

我有一个 ionic 5.0.0 应用程序我在将组件导入另一个组件时遇到问题。

我的应用程序中有 2 个不同的模块，它们是 ChatPageModule 和 HomePageModule。我想在主页模板中包含聊天模板（如 ng-include）。所以我的主屏幕将一分为二。左侧将呈现主页模板，右侧将同时呈现聊天模板。

为了实现这一点，我创建了一个 SharedPageModule，如下所示。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ChatPage } from '../chat/chat.page';

const routes: Routes = [
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ChatPage],
  exports: [ChatPage]
})

export class SharedPageModule {}

之后，我将 SharePageModule 导入 HomePageModule 如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { SharedPageModule } from '../shared/shared.module'


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    SharedPageModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

我将 Chat 组件的模板选择器添加到主页模板后，如下所示。

<ion-header>
    <ion-toolbar>
        <ion-title text-center>HOME</ion-title>                
    </ion-toolbar>
</ion-header>

<ion-content  class="homepage-content no-scroll" >
<ion-row>
...
</ion-row>

<ion-row>
 ...
 </ion-row>

<ion-row>  
<app-chat></app-chat> <!-- Here it is -->
</ion-row>

</ion-content>

至此一切都很好。现在问题开始了。

我想从HomePage 组件中调用ChatPage 组件中编写的一些方法。为此，我按如下方式在主页中导入了聊天组件。

import { Platform } from '@ionic/angular';
import { ChatPage } from '../chat/chat.page'


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  
constructor(private chat: ChatPage) {}

  ngOnInit(): void {
   this.chat.getMessages();
  }
  
 }

但是当我导航到我的主页时出现以下错误。

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> ChatPage]: 
  StaticInjectorError(Platform: core)[HomePage -> ChatPage]: 
    NullInjectorError: No provider for ChatPage!
Error: StaticInjectorError(AppModule)[HomePage -> ChatPage]: 
  StaticInjectorError(Platform: core)[HomePage -> ChatPage]: 
    NullInjectorError: No provider for ChatPage!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveNgModuleDep (core.js:21218)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
    at resolveNgModuleDep (core.js:21218)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Answer 1

您将 ChatPage 注入到 HomePage 组件中，这是错误的。你不需要注入任何东西。您只需要引用 ChatPage 的实例。

为此，您可以在 HTML 中添加一个模板变量，然后使用 @ViewChild 读取组件并调用您想要调用的任何方法。

Answer 2

这不符合 Angular 的标准，您可以使用事件来完成此操作：

使用装饰器@Output 将 EventEmitter 添加到您的子组件，这将允许数据流出您的组件：

// chat-page.component.ts
// ...
@Output
onChat = new EventEmitter<string>();

/* Triggered when a user submit a message */
onSubmit(message: string) { onChat.emit(message) }

// ...

在你的父组件模板中，监听这个事件（$event是事件的数据）

<app-chat (onChat)="aParentComponentMethod($event)"></app-chat>

或者在您的情况下，您似乎只想在初始化组件时获取消息，使用组件执行此操作是错误的模式，您必须使用服务：

// chat.service.ts
// ...
private messages: Message[] = [];

getMessages(): Message[] { return this.messages; }

addMessage(message: Message): void { this.messages.push(message); }
// ...

然后您可以在两个组件（聊天和主页）中使用它：

// home.component.ts
// ...
constructor(private chatService: ChatService) {}

ngOnInit() {
  this.chatService.getMessages();
}
// ...

如果你真的想调用子组件的方法，你仍然可以使用 @ViewChild

链接：

Answer 3

除此之外，您的错误来自于您没有添加提供商：

// home.page.ts

@Component({
  providers:  [ChatPage],
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})

angular 如何将组件导入另一个组件

How to import a component into another component in angular

typescript

angular

ionic4