이번에는 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中文网其它相关文章!
推荐阅读:
위 내용은 Angular17의 사용자 정의 명령어 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!