Angular17의 사용자 정의 명령어 사용에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-13 11:47:592081검색
이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!