Question

我正在使用ionic 5.0.0应用程序，并且其中有一个聊天页面和主页。我想将聊天页面包含在主页中。相当于ng-include。

我已经在 chat.module.ts 中添加了 exports [] ，如下所示

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.page';

const routes: Routes = [
  {
    path: '',
    component: ChatPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  exports: [ChatPage], // --> Here it is
  declarations: [ChatPage]
})
export class ChatPageModule {}

然后我将聊天模块按如下所示导入我的 app.module.ts 中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PopoverPageModule } from './popover/popover.module';
import { HttpClientModule } from '@angular/common/http';
import { GlobalFunctions } from '../providers/global-functions';
import { AuthGuard } from '../providers/security/auth-guard';
import { HTTP } from '@ionic-native/http/ngx';
import { HttpProvider } from '../providers/http/http';
import { HttpAngularProvider } from '../providers/http/http-angular';
import { HttpNativeProvider } from '../providers/http/http-native';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { NgxUiLoaderModule } from  'ngx-ui-loader';
import { IonicGestureConfig } from '../providers/IonicGestureConfig';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { ChatPageModule } from './chat/chat.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    HttpClientModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    PopoverPageModule,
    NgxUiLoaderModule,
    ChatPageModule // --> Here it is
  ],
  providers: [
    HttpProvider,
    HttpAngularProvider,
    HttpNativeProvider,
    GlobalFunctions,
    AuthGuard,
    StatusBar,
    ScreenOrientation,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HAMMER_GESTURE_CONFIG,useClass: IonicGestureConfig
  },
    HTTP
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后我将聊天组件选择器添加到了home.page.html中，如下所示。

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

但是，当我运行我的应用程序时，控制台出现错误。

这是我的 chat.page.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

这是我的 home.page.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpProvider } from '../../providers/http/http';
import { GlobalFunctions } from '../../providers/global-functions';
import { Router, NavigationEnd } from '@angular/router';
import { MenuController } from '@ionic/angular';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import * as _ from 'underscore';
import { NgxUiLoaderService } from 'ngx-ui-loader';
import { Platform } from '@ionic/angular';


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

请参阅我的聊天模块和家庭模块的代码结构。两者都是不同的模块

Answer 1

由于HomePage中没有声明app.module组件，所以

您需要在ChatPageModule所在的模块中导入HomePage 组件已声明。

Answer 2

我知道您有两个不同的模块，并且想在另一个模块中使用它。这是应用程序组件如何共享Hello组件的示例。这里的工作示例。

这是在同一模块中完成的。如果您愿意，也可以照做。

https://stackblitz.com/edit/angular-8-viewchild-example-cazvny

Answer 3

是否可能有一个loginPageModule且home.page.html是此模块的一部分？

您无需将ChatPageModule导入AppModule，必须将ChatPageModule导入LoginPageModule。

在任何情况下，您都是用LoginPageModule <app-chat></app-chat>的html编写的，而您的错误恰恰是没有将ChatPage模块导入LoginPageModule中。 / p>

Answer 4

我从未听说过将页面本身包含在另一个页面中。

我希望看到的是使用命令行生成一个组件，例如：

ionic generate component components/chat

然后，您将获得一组chat.component.ts（scss，html等）文件。

将app-chat中的所有内容重构为组件。

然后，您需要创建自己的共享模块，以便可以在多个页面上重复使用它：

Answer 5

不能在另一页上使用一页。为此，离子具有的成分占整个屏幕/页面的一小部分。

可以通过以下方式完成：

创建聊天组件，而不是聊天页面，然后在您想要的页面/组件中使用它。

在父组件/页面中使用聊天组件的选择器。

在子组件ts文件中：

@Component({
  selector: 'app-chat-component', // <---- This is the selector name
  templateUrl: './chat-component.html',
  styleUrls: ['./chat-component.scss'],
})

在父组件/其他页面的HTML文件中：

<app-chat-component></app-chat-component>

还创建components.module文件，然后在页面中导入要使用的所有组件，然后在page.module文件中导入ComponentsModule。

如何将一个组件模板包含到另一个组件模板中

5 个答案: