tatsächliche Verwendung von Fundament und Adapter Klasse von MDC-Komponenten

Question

Ich versuche mdc-components mit eckigen4 Projekt erstellt mit angular-cli. Also installierte ich gossen mit npm Befehl

npm install material-components-web 

diese

installiert

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

Dann eine Komponente erstellt, die enthält HTML-Markup des Gleiters

<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> 

Auf der ts Seite des Elements erhalten mit ViewChild

@ViewChild('slider') elSlider: ElementRef; 

und wickelten dieses Element MDCSlider Klasse

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

und dann importiert sass Datei für die gleiche mdc Komponente in styles.scss Datei

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

dies gemacht eine schöne Material Slider-Komponente auf UI und es funktioniert mit fein.

Um Änderungsereignis

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

und meldet den aktuellen Wert des Schiebereglers auf Browser-Konsole zu hören.

Aber ich bin verwirrt mit der Stiftung und Adapter Klassen jeder Komponente.

Vom documentaion, ich habe

Stiftung Klasse ist mit dem DOM-Element und auf den Namen der Interaktion kann ich Ereignisse

1) hören

2) get/set-Interaktion der aktuelle Wert der Komponente

und ich kann meinen benutzerdefinierten Adapter an die Foundation-Klasse übergeben.

Ich habe einige Anfragen auf diesem

1) eine Komponente zu verwenden, jedes Mal, ich habe Fundament Klasse zu bedienen? mit benutzerdefinierter Adapterimplementierung?

2) Jedes Szenario oder Beispiel, das die Verwendung von Foundation und Adapter zeigt, mit Ausnahme des Checkbox-Beispiels von angular2?

3) Wird die Fundamentklasse verwendet, wenn ich eine eigene Winkelkomponente erstellen muss?

Answer 1

Zum größten Teil sind diese Fragen im Zusammenhang, ich werde eine Antwort zu einem Zeitpunkt:

eine Komponente zu verwenden, jedes Mal, ich habe Fundament Klasse zu bedienen? mit benutzerdefinierter Adapterimplementierung?

Ja. Momentan gibt es einen Lebenszyklus für JavaScript-MDC-Webkomponenten, wobei bei jeder Initialisierung einer Komponente ein Standardadapter an die Foundation übergeben wird. Sie können entweder einen Verweis darauf beibehalten oder die Funktion attachTo() verwenden, wenn Sie möchten, dass alles automatisch erfolgt. All dies bedeutet, dass selbst wenn Sie nur eine neue Komponente initialisieren, Sie das Adapter-/Fundament-Muster verwenden, da es Teil des Lebenszyklus einer Komponente ist. Die einzige Zeit, die Sie benötigen, sollten Sie den Adapter anpassen, wenn Sie in einem Kontext, die in Bezug auf die Interaktion mit dem DOM, das heißt von idiomatischen JavaScript abweicht: Vuejs, Reaktion, etc ...

Jedes Szenario oder Beispiel das zeigt die Verwendung von Foundation und Adapter mit Ausnahme des Checkbox-Beispiels von angular2?

Wir sind dabei, unseren Ansatz zu verschieben. Wir haben derzeit ein paar Beispiele, die etwa 6 Monate alt sind in /framework-examples im Stammverzeichnis des Repositorys. Wir haben auch ein paar offene Pull-Requests, bei denen wir auf externe Projekte verweisen, von denen wir denken, dass sie in die richtige Richtung gehen. Derzeit überprüfen wir eine für Angular und eine für React. Dies ist der Ansatz, den wir in Zukunft verfolgen werden.

Wird die Basisklasse verwendet, wenn ich eine eigene Winkelkomponente erstellen muss?

Ja. Here as example from the Angular project we are evaluating

In diesem Beispiel können Sie sehen, dass die Stiftung in die Tat hier verwendet wird, sowie ein kundenspezifische Adapterobjekt aus mdc.textfield.adapter.ts

Hinweis er private foundation: {...} = new MDCTextfieldFoundation(this.adapter) definiert, dann in der ngAfterContentInit() Funktion, er ruft die Grundlagen init() Methode. Genau so würden wir vorschlagen, MDC Web in einer Angular App zu verwenden.