Angular의 사용자 정의 구조/속성 지시문에 대한 간략한 분석

Angular 지시어는 컴포넌트(템플릿 지시어 사용), 구조적 지시어(호스트 문서 구조 변경), 속성 지시어(호스트 동작 변경)의 세 가지 유형으로 구분됩니다. 다음은 주로 사용자 정의 구조 지시어와 사용자 정의 속성 지시어를 소개합니다.

1. 사용자 정의 구조 지시문

구조 지시문의 작성 형식은 다음과 같이 *명령 이름이고 *는 구문 설탕입니다. code:

<div *ngIf=""></div>
<!-- 等价于 -->
<ng-template [ngIf]="">
  <div></div>
</ng-template>

다음은 사용자 정의된 구조 명령어입니다. superadmin과 admin이 명령어에 입력되면 DOM 노드가 표시되고, 그렇지 않으면 노드가 제거됩니다. [관련 튜토리얼 권장 사항: "angular 튜토리얼"]

@Directive({
  selector: '[appLogin]'
})
export class LoginDirective implements OnInit{
  @Input('appLogin') user=""
  constructor(private VCR: ViewContainerRef,private TPL: TemplateRef<any>) { 
  //在指令的构造函数中将 TemplateRef 和 ViewContainerRef 注入成私有变量。
  }
  ngOnInit(){
    if(this.user==&#39;superadmin&#39;||this.user=="admin"){
      this.VCR.createEmbeddedView(this.TPL)
    }else{
      this.VCR.clear()
    }
  }
}

<div *appLogin="&#39;superadmin&#39;">超级管理员</div>
<div *appLogin="&#39;admin&#39;">管理员</div>
<div *appLogin="&#39;user&#39;">普通会员</div>

효과:

2. 사용자 정의 속성 지시어

속성 지시어를 사용하면 DOM 요소 및 Angular 구성 요소의 모양이나 동작을 변경할 수 있습니다.

1. @angular/core에서 ElementRef를 가져옵니다. ElementRef의 NativeElement 속성은 호스트 DOM 요소에 대한 직접 액세스를 제공합니다.

2. 지시문의 생성자()에 ElementRef를 추가하여 appColor의 대상인 호스트 DOM 요소에 대한 참조를 삽입합니다.

3. ColorDirective 클래스에 로직을 추가하세요. 다양한 입력 조건에서 배경이 각각 빨간색, 녹색, 파란색으로 표시됩니다.

@Directive({
  selector: '[appColor]'
})
export class ColorDirective implements OnInit{
  @Input() appColor=""
  constructor(private ele:ElementRef) { 
    
  }
  ngOnInit(){
    if (this.appColor == 'superadmin'){
      this.ele.nativeElement.style.backgroundColor="red"
    } else if (this.appColor == 'admin') {
      this.ele.nativeElement.style.backgroundColor = "green"
    }else{
      this.ele.nativeElement.style.backgroundColor = "blue"
    }
  }
}

<div [appColor]="&#39;superadmin&#39;">超级管理员</div>
<div [appColor]="&#39;admin&#39;">管理员</div>
<div [appColor]="&#39;user&#39;">普通会员</div>**

효과:

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 영상! !

위 내용은 Angular의 사용자 정의 구조/속성 지시문에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!