Question

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

我的architure看起来像这个离子：

＆＃13;

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

＆＃13;

configuration.html （我想在app.html中调用此html）：注意：如果我将此代码直接放在app.html中，我可以正确构建我的应用程序并且它可以工作。

＆＃13;

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

＆＃13;

menus.component.ts ：

＆＃13;

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

＆＃13;

app.html ：

＆＃13;

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

＆＃13;

最后 app.component.ts 我用这个：

＆＃13;

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;
    });
  }
  



}

＆＃13;

app.module.ts

＆＃13;

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

＆＃13;

有什么帮助吗？

Answer 1

将@Html.DropDownList("Supplier", Model.Suppliers, "--Select--")添加到selector

MenusPage

使用它将其包含在应用程序组件HMTL

中

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

要记住的要点

这些组件应在相应模块的声明下声明
如果它们来自多个模块，请确保从其父模块导出组件
选择器在整个应用程序中应该是唯一的。

使用角度2在另一个组件中调用模板

1 个答案: