[英]Call a template in another component with angular 2
I would like to call the template configuration.html in my app.html . 我想在我的app.html中调用模板configuration.html。
My architure looks like this with ionic : 我的建筑用ionic看起来像这样:
>src >app - app.component.ts - app.html - app.module.ts >pages > menus - configuration.html - menus.component.ts
configuration.html (I want to call this html in app.html): Note : if I put this code directly in app.html, I can build correctly my app and it works. 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 : 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 : app.html :
<configuration-component></configuration-component> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Finally app.component.ts i use this : 最后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 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 {}
any help please ? 请帮忙吗?
Add a selector
to MenusPage
将
selector
添加到MenusPage
@Component({
selector: 'configuration-component',
templateUrl: 'configuration.html'
})
export class MenusPage { ... }
Use it to include it in the app component HMTL 使用它将其包含在应用程序组件HMTL中
<configuration-component> </configuration-component>
Points to Remember 要记住的要点
These component should be declared under declarations of the respective module 这些组件应在相应模块的声明下声明
If they are from multiple modules, ensure that component is exported from its parent module 如果它们来自多个模块,请确保从其父模块中导出组件
Selectors should be unique across the application. 选择器在整个应用程序中应该是唯一的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.