使用角度 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>

要记住的要点

• 这些组件应该在各自模块的声明下声明

• 如果它们来自多个模块，请确保该组件是从其父模块导出的

• 选择器在整个应用程序中应该是唯一的。