angular 2 패키지 material 2 대화 상자 구성 요소

1.설명
angular-material 2 자체 문서 가 상세 하지 않 고 컨트롤 이 일치 하지 않 아 사용 에 큰 장 애 를 초래 했다.우리 가 가장 자주 사용 하 는 alert 와 confirm 구성 요 소 를 패키지 하 는 방안 을 제공 합 니 다.
2.공식 사용 방법의 alert
① alert 콘 텐 츠 구성 요소 작성

@Component({
template : `<p>  </p>`
})
export class AlertComponent {

 constructor(){
 }
}

② 소속 모듈 에서 설명

//      
declarations: [ AlertComponent],
entryComponents : [ AlertComponent]

③ MdDialg.open 방법 으로 열기

//  MdDialog  
constructor(private mdDialog : MdDialog) { }
//  
this.mdDialog.open(AlertComponent)

3.공식 사용 방법의 confirm
① 내용 확인 구성 요소 작성

@Component({
template : `<div md-dialog-title>'    '</div>
      <div md-dialog-content>      ?</div>
      <div md-dialog-actions>
       <button md-button (click)="mdDialogRef.close('ok')">  </button>
       <button md-button (click)="mdDialogRef.close('cancel')">  </button>
      </div>`
})
export class ConfirmComponent {
 constructor(private mdDialogRef : MdDialogRef<DialogComponent>){ }
}

② 소속 모듈 에서 설명

//      
declarations: [ ConfirmComponent],
entryComponents : [ ConfirmComponent]

③ MdDialog.open 으로 이벤트 열기 및 구독

//  MdDialog  
constructor(private mdDialog : MdDialog) { }
//  
this.mdDialog.open(ConfirmComponent).subscribe(res => {
 res === 'ok' && dosomething
});

4.분석
2,3 에서 보 듯 이 material 2 를 사용 하 는 대화 상자 구성 요 소 는 상당히 번 거 롭 고 심지어 하나의 다른 alert 만 열 어도 하나의 독립 된 구성 요 소 를 설명 해 야 하기 때문에 가용성 이 매우 떨어진다.어 쩔 수 없 는 것 도 아니 고
MdDialog.open 원형:

open<T>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: MdDialogConfig): MdDialogRef<T>;

그 중 MdDialogConfig:

export declare class MdDialogConfig {
  viewContainerRef?: ViewContainerRef;
  /** The ARIA role of the dialog element. */
  role?: DialogRole;
  /** Whether the user can use escape or clicking outside to close a modal. */
  disableClose?: boolean;
  /** Width of the dialog. */
  width?: string;
  /** Height of the dialog. */
  height?: string;
  /** Position overrides. */
  position?: DialogPosition;
  /** Data being injected into the child component. */
  data?: any;
}

구체 적 으로 모든 설정 항목 이 공식 문 서 를 참고 할 수 있 는 용도 가 있 는 지,여기 data 필드 는 주입 서브 구성 요소,즉 open 에 의 해 열 리 는 component 구성 요 소 를 가지 고 있 음 을 설명 합 니 다.어떻게 구 하 죠?

config : any;
constructor(private mdDialogRef : MdDialogRef<AlertComponent>){
  this.config = mdDialogRef.config.data || {};
}

그것 이 있 으 면 우 리 는 템 플 릿 형의 유 니 버 설 dialog 구성 요 소 를 정의 할 수 있 습 니 다.
5.유 니 버 설 구성 요소 정의

//alert.component.html
<div class="title" md-dialog-title>{{config?.title || '  '}}</div>
<div class="content" md-dialog-content>{{config?.content || ''}}</div>
<div class="actions" *ngIf="!(config?.hiddenButton)" md-dialog-actions>
 <button md-button (click)="mdDialogRef.close()">{{config?.button || '  '}}</button>
</div>

//alert.component.scss
.title, .content{
 text-align: center;
}
.actions{
 display: flex;
 justify-content: center;
}

//alert.component.ts
@Component({
 selector: 'app-alert',
 templateUrl: './alert.component.html',
 styleUrls: ['./alert.component.scss']
})
export class AlertComponent {

 config : {};

 constructor(private mdDialogRef : MdDialogRef<AlertComponent>){
  this.config = mdDialogRef.config.data || {};
 }

}

템 플 릿 의 일부 변경 가능 한 내용 을 config 필드 와 연결 합 니 다.그러면 우 리 는 이렇게 사용 할 수 있 습 니 다.

constructor(private mdDialog : MdDialog) { }

let config = new MdDialogConfig();
config.data = {
  content : '  '
}
this.mdDialog.open(AlertComponent, config)

여전히 번 거 롭 지만,적어도 우 리 는 대화 상자 구성 요소 의 복용 문 제 를 해결 했다.
우 리 는 새로운 모듈 을 설명 할 수 있 습 니 다.잠시 사용자 정의 DialogModule 이 라 고 이름 을 지은 다음 에 component 를 이 모듈 에 설명 한 다음 에 이 모듈 을 AppModule 에 설명 할 수 있 습 니 다.그러면 AppModule 의 오염 을 피 할 수 있 고 우리 의 대화 상자 구성 요 소 를 독립 적 으로 재 활용 할 수 있 습 니 다.
6.2 차 봉인
만약 위의 포장 일 뿐 이 라면 가용성 이 여전히 매우 떨 어 지고 도 구 는 가능 한 한 편리 해 야 하기 때문에 우 리 는 다시 포장 할 필요 가 있다.
먼저 CustomDialogModule 에 서 비 스 를 만 들 고 CustomDialogService 라 고 이름 을 지 었 습 니 다.

@Injectable()
export class CustomDialogService {

 constructor(private mdDialog : MdDialog) { }

 //  confirm，        
 confirm(contentOrConfig : any, title ?: string) : Observable<any>{
  let config = new MdDialogConfig();
  if(contentOrConfig instanceof Object){
   config.data = contentOrConfig;
  }else if((typeof contentOrConfig) === 'string'){
   config.data = {
    content : contentOrConfig,
    title : title
   }
  }
  return this.mdDialog.open(DialogComponent, config).afterClosed();
 }

 // 
 alert(contentOrConfig : any, title ?: string) : Observable<any>{
  let config = new MdDialogConfig();
  if(contentOrConfig instanceof Object){
   config.data = contentOrConfig;
  }else if((typeof contentOrConfig) === 'string'){
   config.data = {
    content : contentOrConfig,
    title : title
   }
  }
  return this.mdDialog.open(AlertComponent, config).afterClosed();
 }

사용자 정의 DialogModule 에 등 록 된 provides 는 전역 적 으로 사용 할 수 있 습 니 다.
사용법:

constructor(dialog : CustomDialogService){}

this.dialog.alert('  ');
this.dialog.alert('  ','  ');
this.dialog.alert({
  content : '  ',
  title : '  ',
  button : 'ok'
});
this.dialog.confirm('   ').subscribe(res => {
  res === 'ok' && dosomething
});

이런 사고방식 에 따라 우 리 는 더 많은 구성 요 소 를 봉인 할 수 있다.예 를 들 어 모드 상자,toast 등 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.