ไฟล์ .ts ปกติจะถูกสร้างมาพร้อมไฟล์ .html
โดยในไฟล์ .ts จะเรียกไฟล์ .html ด้วย templateUrl
ดังนี้
1 2 3 4 |
@Component({ selector: 'page-home', templateUrl: 'home.html' }) |
แต่เราสามารถเปลี่ยนมาใช้ template
แทนได้
โดยกำหนดโค๊ดที่ใช้แสดงผลให้กับตัวแปร template
เลย เข่น
src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', //templateUrl: 'home.html' template: `<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <p> I'm a template.</p> </ion-content> `}) export class HomePage { constructor(public navCtrl: NavController) { } } |
จากนั้นไฟล์ src/pages/home/home.html ก็ไม่ได้ใช้ละ ลบทิ้งได้เลย