Tìm hiểu về Component trong Angular

Trong bài viết trước, mình đã có những giải thích cơ bản về một Component trong Angular là gì, có chức năng gì. Trong bài viết này, mình sẽ đi kỹ hơn về Component trong Angular các bạn nhé!

Đầu tiên, mình sẽ tạo một Angular project để làm ví dụ:

Trong Angular thì một Component là một phần HTML trong toàn bộ nội dung HTML mà chúng ta cần xây dựng cho ứng dụng của chúng ta. Ví dụ, các bạn có một trang HTML như sau:

<div id="container">
  <div>
    <h1>Welcome to Huong Dan Java</h1>
  </div>
  <div>
    <p>This is an example about Angular Component</p>
  </div>
</div>

<div>

<h1>Welcome to Huong Dan Java</h1>

</div>

<div>

<p>This is an example about Angular Component</p>

</div>

thì các bạn có thể xây dựng một Component cho toàn bộ trang này, hoặc chia nhỏ nó ra thành nhiều Component cho từng thẻ <div> cũng được.

Trong project mà mình vừa tạo thì class AppComponent trong tập tin src/app/app.component.ts là một Component trong Angular đấy các bạn ạ. Nội dung của class này như sau:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-component';
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'angular-component';

}

Một class Component trong Angular sẽ được khai báo với decorator @Component và có 2 thuộc tính quan trọng trong số 3 thuộc tính của decorator này, bắt buộc phải có là selector và templateUrl.

Thuộc tính selector dùng để khai báo thẻ HTML mà Component này sẽ thay thế nội dung trong ứng dụng Angular của chúng ta.

Chúng ta có 3 cách để khai báo thuộc tính selector này. Cách đầu tiên thì như mặc định các bạn thấy, chúng ta sẽ định nghĩa một thẻ HTML và khai báo giá trị của thẻ đó trong thuộc tính selector. Cách thứ hai là chúng ta sẽ định nghĩa thuộc tính class của một thẻ HTML bất kỳ với giá trị của thuộc tính của class này được khai báo trong thuộc tính selector của decorator @Component. Ví dụ, mình có thể sửa lại thuộc tính selector của decorator @Component trong AppComponent như sau:

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

@Component({
  selector: '.app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-component';
}

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

@Component({

selector: '.app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'angular-component';

}

Khi đó, mình cần sửa lại tập tin index.html trong thư mục home của project như sau:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularComponent</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div class="app-root">
    Loading...
  </div>
</body>
</html>

<!doctype html>

<head>

<title>AngularComponent</title>

</head>

<body>

</div>

</body>

</html>

Kết quả vẫn tương tự.

Cách thứ ba mà các bạn có thể làm là khai báo một thuộc tính mới cho một thẻ HTML bất kỳ rồi khai báo thuộc tính đó trong thuộc tính selector của decorator @Component với dấu ngoặc vuông như sau:

index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularExample</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div app-root>
    Loading...
  </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>AngularExample</title>

</head>

<body>

</div>

</body>

</html>

app.component.ts:

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

@Component({
  selector: '[app-root]',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-component';
}

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

@Component({

selector: '[app-root]',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'angular-component';

}

Thuộc tính templateUrl sẽ định nghĩa đường dẫn tới nội dung HTML mà Component này sẽ xây dựng.

Nếu các bạn đang xây dựng Component này với ít nội dung HTML thì có thể sử dụng thuộc tính template thay vì templateUrl để định nghĩa trực tiếp nội dung HTML này vào Component luôn.

Ví dụ như:

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

@Component({
  selector: '[app-root]',
  template: `
    <h1>
      {{title}}
    </h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-component';
}

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

@Component({

selector: '[app-root]',

template: `

<h1>

</h1>

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'angular-component';

}

Nếu các bạn chỉ khai báo một dòng cho nội dung HTML thì có khai báo chúng bên trong dấu nháy đơn “‘”, nếu khai báo nhiều dòng thì chúng ta sẽ sử dụng dấu “`” thay vì dấu nháy đơn “‘” để khai báo nội dung HTML các bạn nhé!

Thuộc tính styleUrls trong ví dụ của chúng ta dùng để định nghĩa các tập tin CSS để chỉnh sửa style cho Component này.

Nó không bắt buộc vì chúng ta có thể định nghĩa một tập tin CSS chung cho toàn bộ ứng dụng Angular.

Các bạn cũng có thể định nghĩa CSS trong tập tin của Component luôn, sử dụng thuộc tính styles thay vì thuộc tính styleUrls. Ví dụ như mình có thể định nghĩa style cho thẻ <h1> trong tập tin app.component.html như sau:

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

@Component({
  selector: '[app-root]',
  template: `
    <h1>
      {{title}}
    </h1>
  `,
  styles: [`
    h1 {
      color: red;
    }
  `]
})
export class AppComponent {
  title = 'angular-component';
}

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

@Component({

selector: '[app-root]',

template: `

<h1>

</h1>

styles: [`

h1 {

color: red;

}

})

export class AppComponent {

title = 'angular-component';

}

Kết quả:

Trong class AppComponent, như các bạn thấy, nó định nghĩa một biến title.

Biến này ban đầu dùng để thay thế placeholder {{title}} trong tập tin app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<h1>

Welcome to {{ title }}!

</h1>

</div>

<h2>Here are some links to help you start: </h2>

<ul>

<li>

<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>

</li>

<li>

<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>

</li>

<li>

<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>

</li>

</ul>

Giả sử bây giờ mình cần build trang HTML sau:

<div id="container">
  <div>
    <h1>Welcome to Huong Dan Java</h1>
  </div>
  <div>
    <p>This is an example about Angular Component</p>
  </div>
</div>

<div>

<h1>Welcome to Huong Dan Java</h1>

</div>

<div>

<p>This is an example about Angular Component</p>

</div>

Mình sẽ thay thế nội dung của tập tin app.component.html thành nội dung trên rồi revert lại AppComponent như sau:

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

@Component({
  selector: '[app-root]',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-component';
}

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

@Component({

selector: '[app-root]',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'angular-component';

}

Khi đó chạy lại ứng dụng, mình sẽ thấy kết quả như sau:

Nếu bây giờ, mình muốn chia nội dung trên thành 2 Components khác nhau. Một cho:

<div>
    <h1>Welcome to Huong Dan Java</h1>
</div>

<div>

<h1>Welcome to Huong Dan Java</h1>

</div>

và một cho:

<div>
    <p>This is an example about Angular Component</p>
</div>

<div>

<p>This is an example about Angular Component</p>

</div>

thì mình sẽ làm như sau:

Đầu tiên, mình sẽ tạo ra 4 tập tin có tên là h1.component.html, h1.component.ts, p.component.html và p.component.ts trong thư mục src/app như sau:

Nội dung của tập tin h1.component.html sẽ được lấy từ tập tin app.component.html như sau:

<div>
  <h1>Welcome to Huong Dan Java</h1>
</div>

<div>

<h1>Welcome to Huong Dan Java</h1>

</div>

còn nội dung của tập tin p.component.html sẽ như sau:

<div>
  <p>This is an example about Angular Component</p>
</div>

<div>

<p>This is an example about Angular Component</p>

</div>

Nội dung của tập tin app.component.html lúc này chúng ta sẽ thay thế bằng các selector như sau:

<div id="container">
  <app-h1></app-h1>
  <app-p></app-p>
</div>

<app-h1></app-h1>

<app-p></app-p>

</div>

Bây giờ, chúng ta sẽ thêm 2 Component class là PComponent và H1Component trong các tập tin p.component.ts và h1.component.ts. Nội dung của chúng như sau:

PComponent

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

@Component({
    selector: 'app-p',
    templateUrl: './p.component.html'
})
export class PComponent {
}

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

@Component({

selector: 'app-p',

templateUrl: './p.component.html'

})

export class PComponent {

}

H1Component:

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

@Component({
    selector: 'app-h1',
    templateUrl: './h1.component.html'
})
export class H1Component {
}

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

@Component({

selector: 'app-h1',

templateUrl: './h1.component.html'

})

export class H1Component {

}

Sau đó, chúng ta cần khai báo 2 Component này vào AppModule:

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

import { AppComponent } from './app.component';
import { PComponent } from './p.component';
import { H1Component } from './h1.component';

@NgModule({
  declarations: [
    AppComponent,
    PComponent,
    H1Component
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { PComponent } from './p.component';

import { H1Component } from './h1.component';

@NgModule({

declarations: [

AppComponent,

PComponent,

H1Component

imports: [

BrowserModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Chạy lại ứng dụng, các bạn cũng thấy kết quả tương tự.

5/5 - (1 bình chọn)

Khanh Nguyen

Share this post

Tìm hiểu về Component trong Angular

Add Comment Hủy

Khanh Nguyen

Share this post

You might also like...

Cài đặt Node.js sử dụng Node Version Manager

Chuyển đổi danh sách đối tượng này sang danh sách đối tượng khác trong Typescript

Chuyển đổi chuỗi danh sách dữ liệu JSON sang danh sách đối tượng trong TypeScript

Cập nhập NodeJS trên macOS

Add Comment Hủy