Angular 7 에서 구성 요소/사용자 정의 명령/파 이 프 를 만 드 는 방법 인 스 턴 스 상세 설명

구성 요소
명령 으로 구성 요소 만 들 기
•구성 요소 생 성 명령:ng generate component 구성 요소 이름
•생 성 된 구성 요소 구성:구성 요소 이름.html,구성 요소 이름.ts,구성 요소 이름.less,구성 요소 이름.spec.ts
•구성 요소 컨트롤 러

@Component({
 selector: 'app-heroes',
 templateUrl: './heroes.component.html',
 styleUrls: ['./heroes.component.less']
})

수 동 으로 구성 요소 만 들 기
1.구성 요소 ts 파일 만 들 기
2.구성 요소 에 설정

// 1.    ，    
import { Component } from "@angular/core";
import { CoreEdit, NavLayoutComponent } from "@reco/core";
import { DinerService } from "../Service";

// 2.          
@Component({
 //          
 selector: "diner-birth",
 //      
 templateUrl: "./diner.birth.html"
})

//       
export class DinerBirthComponent extends CoreEdit {
 constructor(
 private _dinerService: DinerService,
 layout: NavLayoutComponent
 ) {
 super(_dinerService, 'diner-birth', layout);
 }
}

1.index.ts 파일 에 도입 하고 내 보 내기

// 1.   
import { DinerBirthComponent } from "./diner.birth";

// 2.   
export { DinerBirthComponent }

// 3.   
@NgModule({
 //       NgModule                      
 imports: [....],

 // declarations:[    ]           、     （       ）。
 //    ：             、  、  
 declarations: [DinerBirthComponent],

 //     NgModule         ，               。
 entryComponents: [....],

 //      
 exports: [....]
})

지령
인식 지령
•설명:Angular 에서 세 가지 유형의 명령 이 있 습 니 다.◦1.구성 요소―템 플 릿 을 가 진 명령
◦2.구조 적 명령―DOM 요 소 를 추가 하고 제거 하여 DOM 레이아웃 을 바 꾸 는 명령
◦3.속성 형 명령―요소,구성 요소 또는 기타 명령 의 외관 과 행 위 를 바 꾸 는 명령.
사용자 정의 명령
•사용자 정의 명령 을 만 드 는 명령:ng g d 디 렉 터 리/명령 이름
•생 성 명령
1.명령 어 를 만 드 는 파일 ts 파일
2.명령 파일 에 쓰기

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

//      
@Directive({
 selector: '[dinerHidden]'
})
//        
export class DinerHiddenDirective {
 // el        
 constructor(el: ElementRef) {
 // console.log()
 el.nativeElement.style.display = "none"
 }
}
1. index.ts        ngModule 
// 1.  
import { DinerHiddenDirective } from "./diner.hidden";

// 2.  
export const DINER_COMPONENTS: Provider[] = [ DinerHiddenDirective ];

// 3.ngModule   
@NgModule({
 //       NgModule                      
 imports: [],

 // declarations:[    ]           、     （       ）。
 //    ：             、  、  
 declarations: [DINER_COMPONENTS],
 //     NgModule         ，               。
 entryComponents: []
})

1.페이지 에서 참조

 <!--           -->
 <div class="form-group col-sm-6" dinerHidden>
  
 </div>

파이프 의 상용 API
asyncPipe
•설명:async 파 이 프 는 Observable 이나 Promise 를 구독 하고 최근 값 을 되 돌려 줍 니 다.새 값 이 오 면 async 파 이 프 는 이 구성 요 소 를 변경 검 사 를 해 야 한다 고 표시 합 니 다.구성 요소 가 소각 되면 async 파 이 프 는 잠재 적 인 메모리 유출 문 제 를 없 애기 위해 구독 을 자동 으로 취소 합 니 다.
CurrencyPipe
•설명:숫자 를 금액 문자열 로 변환 하고 현지 화 규칙 에 따라 포맷 합 니 다.이 규칙 들 은 그룹 크기 와 그룹 구분자,소수점 문자 및 현지 화 환경 과 관련 된 설정 항목 을 결정 합 니 다.
DatePipe
•설명:숫자 를 금액 문자열 로 변환 하고 현지 화 규칙 에 따라 포맷 합 니 다.이 규칙 들 은 그룹 크기 와 그룹 구분자,소수점 문자 및 현지 화 환경 과 관련 된 설정 항목 을 결정 합 니 다.
DecimalPipe
•설명:숫자 를 문자열 로 변환 하고 현지 화 규칙 에 따라 포맷 합 니 다.이 규칙 들 은 그룹 크기 와 그룹 구분자,소수점 문자 및 현지 화 환경 과 관련 된 설정 항목 을 결정 합 니 다.
사용자 정의 파이프
•파이프 생 성 명령:ng g pipe 디 렉 터 리/파이프 이름
•파이프 수 동 생 성•ts 파일 생 성

import { Pipe, PipeTransform } from '@angular/core';

//       getGender
@Pipe({
 name: 'getGender'
})

//        
export class GenderPipe implements PipeTransform {
 transform(value: string, exponent: string) {
 if (value == ' ') return "  "
 return value === 'm' ? " " : " "
 }
}

•이 파 이 프 를 NgModuel 에 추가 합 니 다.

// 1.    
import { GenderPipe } from "./diner.gender";

// 2.   
export const DINER_COMPONENTS: Provider[] = [GenderPipe];

// 3.   NgModule  
@NgModule({
 //       NgModule                      
 imports: [...],

 // declarations:[    ]           、     （       ）。
 //    ：             、  、  
 declarations: [DINER_COMPONENTS],
 //     NgModule         ，               。
 entryComponents: [...]
})

•페이지 에 사용 도입

~
<!-- item.DGender   m w，    m   ，w    -->
<td>{{item.DGender | getGender}}</td>
~

총결산
위 에서 말 한 것 은 작은 편집 이 소개 한 Angular 7 에서 구성 요소/사용자 정의 명령/파 이 프 를 만 드 는 방법 인 스 턴 스 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.작은 편집 자 는 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!