mdc 구성 요소의 기초 및 어댑터 클래스의 실제 사용

Question

angular-cli을 사용하여 angular4 프로젝트를 생성 한 mdc-components을 시도 중입니다. 그래서 나는이 다음에 얻을 ViewChild

를 사용하여 요소를 TS 측면에서 슬라이더

<div #slider class="mdc-slider" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Select Value"> 
    <div class="mdc-slider__track-container"> 
     <div class="mdc-slider__track"></div> 
    </div> 
    <div class="mdc-slider__thumb-container"> 
     <svg class="mdc-slider__thumb" width="21" height="21"> 
      <circle cx="10.5" cy="10.5" r="7.875"></circle> 
     </svg> 
     <div class="mdc-slider__focus-ring"></div> 
    </div> 
</div> 

의 HTML 마크 업을 포함하는 구성 요소를 생성

"material-components-web": "^0.22.0" 

를 설치

npm install material-components-web 

NPM 명령을 사용하여 모듈화 설치된

@ViewChild('slider') elSlider: ElementRef; 

및 styles.scss 파일

@import '~@material/slider/mdc-slider'; 

이 UI에 아름다운 재료 슬라이더 성분 렌더링 동일한 MDC 컴퍼넌트 MDCSlider 클래스

let mdcSlider = new MDCSlider(this.elSlider.nativeElement); 

후 수입 사스 파일을 사용하여이 요소를 래핑하고 잘 작동한다.

은 변경 이벤트를

mdcSlider.listen('MDCSlider:change',() => console.log("Value changed to ",mdcSlider.value)); 

을 들으려면 그 브라우저 콘솔에 슬라이더의 현재 값을 기록합니다.

하지만 재단 및 각 구성 요소의 클래스와 혼동합니다. documentaion에서

, 나는

기초 클래스/세트를 얻을) 나는

1) 이벤트

2

를들을 수 DOM 요소와 상호 작용의 이름을 상호 작용하는 것입니다 있어요 구성 요소의 현재 값

그리고 사용자 정의 어댑터를 기초 클래스에 전달할 수 있습니다.

나는 몇 가지 질문이이

1) 구성 요소, 모든 시간을 사용하려면, 내가 기초 클래스를 사용할 필요가? 사용자 정의 어댑터 구현?

2) angular2라는 체크 박스 예제를 제외하고 기초 및 어댑터 사용을 보여주는 시나리오 또는 예제?

3) 내 자신의 각 구성 요소를 만들어야하는 경우 기초 클래스가 사용됩니까? 대부분의 경우

Answer 1

, 이러한 질문이 관련되어, 나는 한 번에 하나씩 답변 해 드리겠습니다 : 때마다

이 구성 요소를 사용하기를, 나는 기초 클래스를 사용할 필요가? 사용자 정의 어댑터 구현?

예. 현재 구성 요소가 초기화 될 때마다 기본 어댑터가 기초로 전달되는 JavaScript MDC 웹 구성 요소의 라이프 사이클이 있습니다. 참조를 유지하거나 attachTo() 함수를 활용하면 모든 것이 자동으로 수행되기를 원할 수 있습니다. 이 모든 것은 새로운 구성 요소를 초기화하는 것이 모두 구성 요소의 라이프 사이클의 일부이므로 어댑터/기초 패턴을 사용하고 있다는 것입니다. 등 Vuejs, 반작용,

모든 시나리오 또는 예 ... : 당신은 즉, DOM, 상호 작용에 관련하여 관용적 자바 스크립트에서 벗어난 상황에있는 경우 어댑터를 사용자 정의해야한다 유일한 시간이다 그것은 앵커 2의 체크 박스 예제를 제외하고 기초와 어댑터의 사용법을 보여줍니다.

Google의 접근 방식을 변경하는 중입니다. 현재 저장소의 루트에있는 /framework-examples에 약 6 개월 된 몇 가지 예가 있습니다. 우리는 올바른 방향으로 나아가고 있다고 생각되는 외부 프로젝트와 연결되는 몇 가지 공개 요청도 있습니다. 현재 Angular와 React를 검토 중입니다. 이것이 우리가 앞으로 취할 접근법입니다.

내 자신의 각도 구성 요소를 만들어야하는 경우 기초 클래스가 사용됩니까?

예. 이 예는, mdc.textfield.adapter.ts

에서뿐만 아니라 사용자 정의 어댑터 개체

그는 private foundation: {...} = new MDCTextfieldFoundation(this.adapter)을 정의 공지 사항, 재단이 실제로 여기에 사용되는 것을 볼 수 있습니다에서

Here as example from the Angular project we are evaluating 다음 ngAfterContentInit() 기능에, 그는 재단은 init() 방법을 호출합니다. 이것은 Angular app에서 MDC Web을 사용하는 것이 좋습니다.