在角度為2的另一個組件中調用模板

Question

我想在我的app.html中調用模板configuration.html。

我的建築用ionic看起來像這樣：

 >src >app - app.component.ts - app.html - app.module.ts >pages > menus - configuration.html - menus.component.ts 

configuration.html （我想在app.html中調用此html）： 注意 ：如果將這段代碼直接放在app.html中，則可以正確構建我的應用程序，並且可以正常工作。

 <ion-menu persistent="true" [content]="content" side="left" id="menuParameter"> <ion-header> <ion-toolbar color="default"> <ion-title>Configuration</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item> <ion-label>Mode1</ion-label> <ion-toggle color="energized"></ion-toggle> </ion-item> <ion-item> <ion-label>Mode2</ion-label> <ion-toggle color="danger" [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle> </ion-item> </ion-list> </ion-content> </ion-menu> <ion-menu persistent="true" [content]="content" side="right" id="menuInformation"> <ion-header> <ion-toolbar color="default"> <ion-title>Menu2</ion-title> </ion-toolbar> </ion-header> <ion-content> </ion-content> </ion-menu> 

menus.component.ts ：

 import { Component } from '@angular/core'; import { Logger } from '../../app/logger.service' import { HttpClient } from '@angular/common/http'; import { NavController, NavParams, MenuController } from 'ionic-angular'; import { Events } from 'ionic-angular'; @Component({ selector: 'configuration-component', templateUrl: 'configuration.html' }) /** * Contain link with */ export class MenusPage { constructor(){} } 

app.html ：

 <configuration-component></configuration-component> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

最后app.component.ts我用這個：

 import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HomePage } from '../pages/home/home'; import { MenusPage } from '../pages/menus/menus.component'; import { Events } from 'ionic-angular'; @Component({ templateUrl: 'app.html' }) export class AppComponent { rootPage:any = HomePage; constructor(public events: Events,platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { statusBar.styleDefault(); splashScreen.hide(); this.isToggled = false; }); } } 

app.module.ts

 @NgModule({ declarations: [ AppComponent, MenusPage, ], imports: [ BrowserModule, FormsModule, HttpClientModule, IonicModule.forRoot(AppComponent) ], bootstrap: [IonicApp], entryComponents: [ AppComponent, MenusPage ], providers: [ StatusBar, SplashScreen, Geolocation, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} 

請幫忙嗎？

Answer 1

將selector添加到MenusPage

@Component({
  selector: 'configuration-component',
  templateUrl: 'configuration.html'
})
export class MenusPage { ... }

使用它將其包含在應用程序組件HMTL中

<configuration-component> </configuration-component>

要記住的要點

• 這些組件應在相應模塊的聲明下聲明

• 如果它們來自多個模塊，請確保從其父模塊中導出組件

• 選擇器在整個應用程序中應該是唯一的。