Question

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

我的应用程序中有2个不同的模块，分别是ChatPageModule和HomePageModule。我想将聊天模板包括在Home模板中（例如ng-include）。因此，我的主屏幕将被拆分为2。左侧将同时渲染主模板，右侧将同时渲染聊天模板。

为此，我创建了一个 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 {}

按如下所示将聊天组件的模板选择器添加到家庭模板中之后。

<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 componennt编写的一些方法。为此，我将聊天组件导入到Home中，如下所示。

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

除了所有内容之外，您的错误还来自您没有添加提供程序的事实：

{
  "clientId": "abc"
}

Answer 2

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

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

Answer 3

这不符合Angular的标准，要实现此目的，您可以使用Events：

使用装饰器@Output将EventEmitter添加到您的子组件中，它将使数据从您的组件中流出：

$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); }
// ...

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

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

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

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

<?php
query_posts([
    'post_type' => ['projects'],
    'posts_per_page' => 5,
    'paged' = >$paged,
]);
?>

如果您确实要调用子组件的方法，则仍然可以使用@ViewChild

链接：

如何以角形将组件导入另一个组件

3 个答案: