VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học Node.js

Giới thiệu Angular Cài đặt môi trường Angular7 Tạo dự án đầu tiên trong Angular7 Hướng dẫn lập trình Angular7 với trình soạn thảo Visual Studio Code Angular7 - Components Angular7 - Modules Angular7 - Data Binding Angular7 - Event Binding Angular7 - Templates Angular7 - Directives Angular7 - Pipes Angular7 - Routing Angular7 - Services Angular7 - Http Client Angular7 - CLI Prompts Angular7 - Forms
1 / 3
❮ ❯

Directive trong Angular 7


Template trong Angular 7
Pipe trong Angular 7

Nội dung chính

  • Directive trong Angular
  • Làm thế nào để tạo Directive tùy chỉnh?

Directive trong Angular

Directive trong Angular là một lớp js, được khai báo là @directive. Chúng ta có 3 directive trong Angular. Các directive được liệt kê dưới đây.

Component Directive

Các lớp này tạo thành lớp main có chi tiết về cách thành phần sẽ được xử lý, khởi tạo và sử dụng trong thời gian chạy.

Structural Directive

Một chỉ thị cấu trúc về cơ bản giải quyết việc thao tác các phần tử DOM. Các chỉ thị cấu trúc có dấu * trước chỉ thị. Ví dụ, *ngIf và *ngFor.

Attribute Directive

Các chỉ thị thuộc tính xử lý việc thay đổi giao diện và hành vi của phần tử dom. Bạn có thể tạo các chỉ thị của riêng mình như được giải thích trong phần bên dưới.


Làm thế nào để tạo Directive tùy chỉnh?

Trong phần này, chúng ta sẽ tìm hiểu về các Directive tùy chỉnh được sử dụng trong các Component. Các lệnh tùy chỉnh do chúng ta tạo ra và không phải là tiêu chuẩn.

Chúng ta sẽ tạo chỉ thị bằng cách sử dụng dòng lệnh. Lệnh tạo chỉ thị bằng dòng lệnh như sau:


ng g directive name_of_directive 
Ví dụ:
ng g directive addText

Kết quả:

C:\Angular\Angular7\my-app>ng g directive addText
CREATE src/app/add-text.directive.spec.ts (229 bytes)
CREATE src/app/add-text.directive.ts (143 bytes)
UPDATE src/app/app.module.ts (556 bytes)

Các tệp ở trên, tức là, add-text.directive.spec.ts và add-text.directive.ts được tạo và tệp app.module.ts được cập nhật.

app.module.ts


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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { AddTextDirective } from './add-text.directive';

@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    AddTextDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lớp ChangeTextDirective được khai báo trong file trên. Lớp này được tạo ra và có nội dung như sau:

add-text.directive.ts


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

@Directive({
  selector: '[appAddText]'
})
export class AddTextDirective {

  constructor() { }

}

File trên có một Directive và nó cũng có một thuộc tính selector. Giá trị của selector được sử dụng trong view, nơi chúng ta gán Directive tùy chỉnh.

app.component.html


<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<div style = "text-align:center"> 
  <span appAddText > Welcome to {{title}}.</span> 
</div>

<router-outlet></router-outlet>

Cập nhật file add-text.directive.ts như sau:


import { Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[appAddText]'
})
export class AddTextDirective {

  constructor(Element: ElementRef) {
    console.log(Element);
    Element.nativeElement.innerText = "Text is added by appAddText Directive.";
  }
}

Trong file trên, có một lớp gọi là AddTextDirective và một hàm constructor, có phần tử kiểu ElementRef là bắt buộc. Phần tử này có tất cả các chi tiết mà chỉ thị appAddText được áp dụng.

Lệnh console.log để in kết quả ra console của trình duyệt.

Kết quả:

Directive trong Angular7

Kết quả trên console của trình duyệt:

Directive trong Angular7
Template trong Angular 7
Pipe trong Angular 7

Recent Updates

HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7Data Binding trong Angular 7Component trong Angular 7Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio CodeTạo dự án Angular đầu tiênSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml