Angular 2 - Mẫu

Trong chương về Thành phần, chúng ta đã thấy một ví dụ về mẫu sau.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Điều này được gọi là inline template. Có nhiều cách khác để xác định một mẫu và có thể được thực hiện thông qua lệnh templateURL. Cách đơn giản nhất để sử dụng điều này trong thành phần như sau.

Cú pháp

templateURL:
viewname.component.html

Thông số

  • viewname - Đây là tên của mô-đun thành phần ứng dụng.

Sau tên chế độ xem, thành phần cần được thêm vào tên tệp.

Sau đây là các bước để xác định một mẫu nội tuyến.

Step 1- Tạo một tệp có tên app.component.html. Điều này sẽ chứa mã html cho chế độ xem.

Step 2 - Thêm đoạn mã sau vào tệp đã tạo ở trên.

<div>{{appTitle}} Tutorialspoint </div>

Điều này xác định một thẻ div đơn giản và tham chiếu đến thuộc tính appTitle từ lớp app.component.

Step 3 - Trong tệp app.component.ts, hãy thêm mã sau.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

Từ đoạn mã trên, thay đổi duy nhất có thể được lưu ý là từ templateURL, cung cấp liên kết đến tệp app.component.html nằm trong thư mục ứng dụng.

Step 4 - Chạy đoạn mã trên trình duyệt, bạn sẽ nhận được kết quả như sau.

Từ kết quả đầu ra, có thể thấy rằng tệp tệp mẫu (app.component.html) đang được gọi tương ứng.