Trong video này, tôi đang sử dụng trình chỉnh sửa trực tuyến có tên là Plunker để viết và chạy mã Angular. Sách và mã kể từ đó đã được cập nhật để sử dụng StackBlitz thay thế. Để hiểu thêm về lý do tại sao và sự khác biệt giữa

Xem mã

Mã vận hành

• Viết ứng dụng đầu tiên của chúng tôi
• vòng lặp

Bắt đầu làm cho ứng dụng của chúng ta có thể tái sử dụng nhiều hơn một chút bằng cách lưu trữ thiết lập và điểm mấu chốt của trò đùa của chúng ta dưới dạng thuộc tính trên lớp thành phần của chúng ta thay vì được mã hóa cứng trong HTML

Kết quả học tập

• Hiểu các lớp chi tiết hơn, cách xác định chúng và cách sử dụng chúng

• Phép nội suy chuỗi là gì và cú pháp ria mép {{ }}

Động lực

Trong chương trước, chúng ta đã tạo ứng dụng Angular đầu tiên của mình, một ứng dụng rất đơn giản chỉ có một thành phần có tên là JokeComponent với thẻ là joke

Giờ đây, bất cứ khi nào chúng tôi muốn hiển thị trò đùa đó trong ứng dụng của mình, chúng tôi chỉ cần thêm thẻ

let joke = new JokeComponent()

0 vào HTML của mình

Nhưng nó không thể tái sử dụng được nhiều, nó chỉ hiển thị lặp đi lặp lại cùng một trò đùa, một JokeComponent có thể tái sử dụng nhiều hơn sẽ là nơi mà nhà phát triển có thể sử dụng các trò đùa khác nhau

Trước tiên, hãy thêm một số thuộc tính vào lớp của chúng ta, như vậy

class JokeComponent {
  setup: string;
  punchline: string;
}

Chúng ta đang nói rằng lớp này có hai thuộc tính,

let joke = new JokeComponent()

2 và 

let joke = new JokeComponent()

3, cả hai thuộc tính này chỉ có thể chứa

let joke = new JokeComponent()

4

Ghi chú

Mã _______0_______5 được gọi là một loại và là một phần cốt lõi của TypeScript, một thứ mà bạn có thể không quen sử dụng nếu trước đây bạn chưa từng làm việc với các ngôn ngữ được nhập

Chúng ta sẽ thảo luận về Loại chi tiết hơn trong phần tiếp theo nhưng tóm lại, nếu chúng ta cố gắng làm cho các thuộc tính này chứa bất kỳ thứ gì khác ngoài chuỗi TypeScript sẽ đưa ra lỗi

Các lớp học

Hãy nhớ rằng tôi đã nói rằng các lớp là bản thiết kế cho đối tượng, hay nói cách khác là hướng dẫn về cách tạo đối tượng. Để thực sự tạo một đối tượng bằng cách sử dụng 

let joke = new JokeComponent()

6, chúng tôi sử dụng từ khóa 

let joke = new JokeComponent()

7, như vậy

let joke = new JokeComponent()

joke là một đối tượng được tạo bằng cách sử dụng lớp JokeComponent, một từ khác cho đối tượng được tạo bằng cách sử dụng một lớp là một thể hiện của lớp hoặc chỉ là thể hiện

Vì chúng ta đã thêm một số thuộc tính vào lớp JokeComponent nên thể hiện của lớp được tạo cũng có các thuộc tính đó

console.log(joke.setup);
console.log(joke.punchline);

Nếu chúng ta thực sự cố gắng chạy đoạn mã trên, chúng ta sẽ thấy rằng không có gì được in ra bảng điều khiển, đó là do các thuộc tính 

let joke = new JokeComponent()

2 và 

let joke = new JokeComponent()

3 chưa được khởi tạo, chúng trống

Với các lớp, cách chúng ta khởi tạo các thuộc tính khi chúng ta khởi tạo một đối tượng thông qua một hàm lớp đặc biệt có tên là 

console.log(joke.setup);
console.log(joke.punchline);

3

class JokeComponent {
  setup: string;
  punchline: string;

  constructor() {
    this.setup = "What did the cheese say when it looked in the mirror?";
    this.punchline = "Halloumi (Hello Me)";
  }
}

Bây giờ, khi chúng ta khởi tạo lớp, hàm 

console.log(joke.setup);
console.log(joke.punchline);

3 được gọi và điều này sẽ khởi tạo các thuộc tính 

let joke = new JokeComponent()

2 và 

let joke = new JokeComponent()

3

Quan trọng

Vì lợi ích của ngắn gọn, tôi đang khởi tạo các thuộc tính của chúng tôi trong hàm tạo, phương pháp được đề xuất với việc khởi tạo một thành phần là sử dụng Móc vòng đời thành phần, một lần nữa sẽ nói thêm về điều đó sau

Nội suy chuỗi

Hiện tại thiết lập và đường viền chi tiết được mã hóa cứng thành mẫu HTML của _______26_______ của chúng tôi. Thay vào đó, chúng tôi cần có mẫu xuất ra nội dung của thuộc tính của mình

Chúng tôi có thể làm điều đó trong mẫu bằng cách sử dụng cú pháp {{ }} đặc biệt, còn được gọi là cú pháp ria mép

_{{ }} chứa JavaScript được chạy bởi Angular và đầu ra được chèn vào HTML

Vì vậy, nếu chúng tôi đặt

class JokeComponent {
  setup: string;
  punchline: string;

  constructor() {
    this.setup = "What did the cheese say when it looked in the mirror?";
    this.punchline = "Halloumi (Hello Me)";
  }
}

0 vào mẫu thì số __13_______1 sẽ được chèn vào HTML

Mẫu biết về lớp JokeComponent mà nó được đính kèm vì vậy ở giữa {{ }} chúng ta cũng có thể đọc các thuộc tính hoặc thậm chí gọi hàm trên _______26_______ của mình và có đầu ra được chèn vào HTML

Chúng tôi chỉ muốn hiển thị các giá trị của các thuộc tính

let joke = new JokeComponent()

2 và 

let joke = new JokeComponent()

3 nên chúng tôi chỉ sử dụng các thuộc tính đó, như vậy

{{setup}}
{{punchline}}

Tóm lược

Chúng tôi đã giải thích cách một lớp là một bản thiết kế cho một đối tượng và chúng tôi có thể tạo một phiên bản cụ thể của một lớp bằng cách sử dụng từ khóa

let joke = new JokeComponent()

7

Thể hiện của lớp có thể có các thuộc tính và chúng tôi có thể liên kết các thuộc tính đó với các phần của mẫu của chúng tôi bằng cách sử dụng phép nội suy chuỗi thông qua cú pháp _______25_______

niêm yết

Liệt kê 1. src/chính. ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Component} from '@angular/core';

@Component({
  selector: 'joke',
  template: `
    
{{setup}}
    
{{punchline}}
  `
})
class JokeComponent {
  setup: string;
  punchline: string;

  constructor() {
    this.setup = "What did the cheese say when it looked in the mirror?";
    this.punchline = "Halloumi (Hello Me)";
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [JokeComponent],
  bootstrap: [JokeComponent]
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

---

Bắt lỗi hay muốn đóng góp cho cuốn sách?

---

• Viết ứng dụng đầu tiên của chúng tôi
• vòng lặp

JavaScript nâng cao

Khóa học độc đáo này dạy cho bạn kiến ​​thức JavaScript nâng cao thông qua một loạt câu hỏi phỏng vấn. Đưa JavaScript của bạn đến năm 2021 ngay hôm nay

Nâng cấp JavaScript của bạn ngay bây giờ

[🌲,🌳,🌴].push(🌲)

Nếu bạn thấy các khóa học của tôi hữu ích, vui lòng xem xét việc trồng cây thay mặt tôi để chống biến đổi khí hậu. Chỉ $4. 50 sẽ trả cho 25 cây được trồng dưới tên tôi. Trồng cây

Làm cách nào để nội suy HTML trong Angular?

Làm cách nào để hiển thị chuỗi HTML trong Angular?

Làm cách nào để sử dụng các thẻ HTML trong Angular?

Làm cách nào để đưa HTML vào Angular?