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

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

我已在我的

chat.module.ts中添加了
导出[]，如下所示

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>

这是我的
主页.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() {
  }

}

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

查看我的聊天模块和主页模块的代码结构。两者都是不同的模块


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

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


由于
主页
组件未在
应用程序模块
中声明

您需要在
主页
组件已声明

您是否有可能拥有loginPageModule，并且home.page.html是此模块的一部分

您不需要将
ChatPageModule
导入
AppModule
，必须将
ChatPageModule
导入
LoginPageModule


在任何情况下，您都使用了
LoginPageModule
的一些html编写，您的错误恰恰是您没有在
LoginPageModule
中导入
ChatPage
模块。我从未听说过将页面本身包含在另一个页面中

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

ionic generate component components/chat

然后您将得到一组
chat.component.ts
（scss、html等）文件

将
应用程序聊天
中的所有内容重构到组件中

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





一页不能用于另一页。为此，ionic的组件只占整个屏幕/页面的一小部分

可通过以下方式完成：

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

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

在子组件ts文件中：

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

@组件({
选择器：“app chat component”，//显示错误。@Adrita Sharma error addedhome.page.html是一个组件，对吗？是哪个模块的一部分？我在app.moduleHii Abhilash中没有看到它！！请确保您使用了正确的选择器，这与chat.module.ts文件中的相同吗？嗨，HaSnen Tai，我添加了chat.page.ts文件工作正常当我在home模块中添加聊天组件作为声明时。但我无法在任何其他模块中声明聊天组件。因为它显示“将声明移动到同时导入聊天和home模块的其他模块”@AbhilashShajan单个组件的声明必须在父模块中，若要在不同的模块中使用组件，您需要创建所谓的共享模块，该共享模块将是声明组件并将其导出的模块，以便您的应用程序中希望使用它的任何模块都可以导入共享module.是的Daniel我已经按照你说的将聊天模块导入了我的主页模块。现在我可以在主页模板中看到聊天模板。但是问题是主页模板消失了。聊天模板刚刚替换了主页模板。如何同时看到这两个模板？
<app-chat-component></app-chat-component>