Angular17의 사용자 정의 명령어 사용에 대한 자세한 설명

이번에는 Angular17에서 맞춤 명령어 사용에 대한 자세한 설명을 가져왔습니다. Angular17에서 맞춤 명령어를 사용할 때 주의사항은 무엇인가요?

1 HTML이란 무엇입니까

HTML 문서는 HTML 요소, CSS 스타일 및 JavaScript코드를 포함하는 일반 텍스트 파일입니다. HTML 요소는 태그로 표시되며 브라우저는 각 태그에 대한 속성이 있는 DOM 객체를 생성합니다. 사용자가 브라우저에서 보는 콘텐츠는 브라우저가 DOM 객체를 렌더링한 결과입니다.

2 지침 분류

 구성요소, 속성 지시문, 구조 지시문

 구체적인 지식 포인트는 "Angular2 공개"를 참조하세요

3은 명령어 정의에 일반적으로 사용되는 일부 상수를 나타냅니다.

  3.1 지시어

ˆ ˆ ˆ 컨트롤러 클래스가 사용자 정의 명령 컨트롤러 클래스임을 나타내기 위해 컨트롤러 클래스를 장식하는 데 사용됩니다

  3.2 ElementRef

DOM 개체에 대한 참조로 사용되는 종속성 주입은 생성자를 통해 수행됩니다. 해당 인스턴스는 맞춤 명령어로 표시된 요소의 DOM 개체를 나타내며, 맞춤 명령어로 표시된 각 요소는 자동으로 ElementRef 개체를 요소로 갖습니다. . DOM 객체에 대한 참조(전제 조건: ElementRef가 사용자 정의 명령어의 컨트롤러에 독립적으로 삽입됨)

  3.3 렌더2

Render2 인스턴스는 DOM 노드를 작동하는 데 사용됩니다. 왜냐하면 Angular는 DOM 노드를 직접 작동하는 것을 권장하지 않기 때문입니다. Render2는 Angular4에서만 지원되며 이전 버전에서는 사용자 정의 명령으로 표시된 각 요소에 DOM 속성을 작동하는 Render2 인스턴스가 있습니다. 요소의 (전제 조건: Render2는 사용자 정의 지시문의 컨트롤러에 종속성이 주입되어 있습니다)

  3.4 HostListener

이벤트 트리거 방법을 꾸미기 위한 주석

4 사용자 정의 속성 명령

 사용자 정의 속성 지시어에는 @Directive 데코레이터

import { Directive } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

로 장식된 컨트롤러 클래스가 필요합니다. 4.1 사용자 정의 속성 지침 구현

    4.1.1 사용자 정의 속성 명령 제어 클래스 만들기

팁 01: 맞춤형 지침을 위한 모듈을 특별히 생성하세요

ng g d directive/test/directive-test02 --spec=false --module=directive

    4.1.2 컨트롤러 클래스에서 ElementRef   

constructor(
 private el: ElementRef
 ) {}

의 종속성 주입     4.1.3 ElementRef 인스턴스를 통해 사용자 정의 명령으로 표시된 요소에 해당하는 DOM 객체의 배경색을 변경합니다 

 ngOnInit() {
  this.el.nativeElement.style.backgroundColor = 'skyblue';
 }

     4.1.3 사용자 정의 명령 모듈에서 내보내기      

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DirectiveTest01Directive } from './test/directive-test01.directive';
import { SharedModule } from '../shared/shared.module';
import { DirectiveTest02Directive } from './test/directive-test02.directive';
@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [
  DirectiveTest01Directive,
  DirectiveTest02Directive],
 exports: [
  DirectiveTest01Directive,
  DirectiveTest02Directive
 ]
})
export class DirectiveModule { }

지정      4.1.4 지정된 명령어를 사용해야 하는 구성요소가 있는 모듈로 맞춤 명령어 모듈을 가져옵니다

팁 01: 맞춤 명령어는 일반적으로 여러 번 사용되므로 맞춤 명령어 모듈은 일반적으로 공유 모듈로 가져오고 공유 모듈에서 내보내므로 다른 모듈은 공유 모듈만 가져오면 됩니다

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { 
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 MdRadioModule,
 MdRadioButton
 } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DirectiveModule } from '../directive/directive.module'; 
@NgModule({
 imports: [
  CommonModule,
  RouterModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  MdToolbarModule,
  MdSidenavModule,
  MdIconModule,
  MdButtonModule,
  MdCardModule,
  MdInputModule,
  DirectiveModule,
  MdRadioModule
 ],
 declarations: [],
 exports: [
  CommonModule,
  RouterModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  MdToolbarModule,
  MdSidenavModule,
  MdIconModule,
  MdButtonModule,
  MdCardModule,
  MdInputModule,
  DirectiveModule,
  MdRadioButton
 ]
})
export class SharedModule { }

     4.1.5 컴포넌트의 커스텀 컴포넌트에 해당하는 선택기를 사용하세요

사용자 정의 지시문의 선택기는 @Directive 데코레이터의 선택기 메타데이터에 의해 지정됩니다

 요소에서 직접 맞춤 명령 선택기를 표시하기만 하면 됩니다    

<p class="panel panel-primary">
  <p class="panel panel-heading">实现自定义属性指令</p>
  <p class="panel-body">
    <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button>
    <br /><br />
    <button md-raised-button>未实现自定以指令的按钮</button>
  </p>
  <p class="panel-footer">2018-1-20 22:47:06</p>
</p>

     4.1.6 코드 요약

import { Directive, ElementRef } from '@angular/core';
import { OnInit } from '../../../../node_modules/_@angular_core@4.4.6@@angular/core/src/metadata/lifecycle_hooks';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 }
}

  4.2 입력 속성을 사용자 정의 속성 지침에 바인딩

4.1에서 구현된 사용자 정의 속성 명령에서는 배경색이 하드 코딩되어 변경할 수 없습니다. 동적 변경의 목적을 달성하기 위해 입력 속성을 명령에 바인딩하여 데이터 전송을 달성할 수 있습니다

     4.2.1 사용자 정의 속성 지시문의 컨트롤러에 myColor

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 @Input()
 myColor: string;
 constructor(
  private el: ElementRef
 ) {}
 ngOnInit() {
  this.el.nativeElement.style.backgroundColor = this.myColor;
 }
}

입력 속성을 추가합니다.      4.2.2 구성 요소의 myColor 속성에 값 할당

      技巧01：在给输入属性赋值时，等号右边如果不是一个变量就需要用单引号括起来
View Code
    4.2.3 效果展示

    4.2.4 改进

      可以通过自定义属性指令的选择器来实现数据传输

      》利用自定义属性指令的选择器作为输入属性myColor输入属性的别名

      》在组件中直接利用自定义指令的选择器作为输入属性

View Code
      》 效果展示

  4.3 响应用户操作

    在自定义属性指令中通过监听DOM对象事件来进行一些操作

    4.2.1 引入 HostListener 注解并编写一个方法    

      技巧01：HostListener注解可以传入两个参数

        参数1 -> 需要监听的事件名称

        参数2 -> 事件触发时传递的方法

 @HostListener('click', ['$event'])
 onClick(ev: Event) {	
		  }	

    4.2.2 在方法中实现一些操作 

@HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
  if (this.el.nativeElement.style.backgroundColor === 'green') {
  this.el.nativeElement.style.backgroundColor = 'skyblue';
  } else {
  this.el.nativeElement.style.backgroundColor = 'green';
  }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

实现react服务器渲染的步奏详解

JS里EventLoop的使用详解

위 내용은 Angular17의 사용자 정의 명령어 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!