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 {}

在我將聊天組件的模板選擇器添加到主模板后，如下所示。

 <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 組件編寫的方法。 為此，我在 Home 中導入了 Chat 組件，如下所示。

 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

除此之外，您的錯誤來自您沒有添加提供程序的事實：

// home.page.ts

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

Answer 2

您將ChatPage注入HomePage組件，這是錯誤的。 你不需要注入任何東西。 您只需要引用ChatPage的實例。

為此，您可以在 HTML 中添加一個模板變量，然后使用@ViewChild讀取組件並調用您想要調用的任何方法。

Answer 3

這不遵循 Angular 的標准，要做到這一點，您可以使用事件：

1. 使用裝飾器 @Output 將 EventEmitter 添加到您的子組件，這將允許數據流出您的組件：

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

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

// ...

2. 在你的父組件模板中，監聽這個事件（ $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

鏈接：

• 如何使用@Output 和@Input
• Angular服務教程