2015-12-28 8 views
5

Ich versuche, eine <markdown-component> mit ES6-Syntax zu bauen. Die @Input Syntax Sugar wird in ES6 nicht unterstützt und ich kann keine brauchbare Alternative finden.Angular2 ES6 @Input Alternative

ich die Definition der Eingang in die Mutter mit:

<ng2-markdown [source]="source"></ng2-markdown> 

dann die Eingabe zu akzeptieren mit:

@Component({ 
    selector: 'ng2-markdown', 
    inputs: [ 'source' ] 
}) 

Wenn ich eine Vorlage hinzufügen, kann ich es den Wert Ausgabe wie erwartet erhalten wird aber es gibt keine Möglichkeit, die Eingabe im Konstruktor zu verwenden.

Dieses Modul sollte eigentlich eine Direktive sein, und der Wert source definiert den Pfad zu der Markdown-Datei, die geladen wird.

+3

Die Alternative ist korrekt, aber zur Konstruktionszeit wird es nicht funktionieren. Es muss mindestens in ngOnInit sein. –

+0

@EricMartinez Vielen Dank. Daran habe ich stundenlang festgemacht. Ich werde eine Antwort hinzufügen, die zeigt, was so funktioniert - hoffentlich - es wird anderen helfen. –

+0

Sie möchten '@ Input' nicht verwenden, da es nicht ES6 ist, sondern gleichzeitig' @ Component'. Woher? – zeroflagL

Antwort

2

Dank @Eric Martinez Kommentar, konnte ich es zum Laufen bringen.

Die Eingänge sind erst verfügbar in der Phase OnInit des Lebenszyklus.

Folgende gearbeitet:

... 
export class MarkdownComponent { 
    constructor() {} 

    ngOnInit() { 
    console.log(this.source); 
    } 
... 

ich den Eingang in den Konstruktor zuzugreifen versuchte, bevor die Eingänge initialisiert wurden.

+0

ohne Bezug, aber ich habe die letzten 1+ Stunden damit verbracht herauszufinden, wie man eine externe Bibliothek in meine Angular 2 + SystemJS App mit wenig Erfolg einbaut (auch mit der Hoffnung, einen Markdown-Parser zu verwenden) - wie bist du gelandet? es tun? – jjwon

+0

@jjwon Ich verwende JSPM, um Importe zu verwalten. Es kümmert sich um die Installation des Pakets, das Installieren von Abhängigkeiten und das Zuordnen aller Elemente zu Labels in config.js. Sorry über den Markdown-Parser, ich habe diesen Repo gestern erstellt, indem ich die Komponente aus einem anderen Projekt extrahiert habe. Ich werde eine Notiz hinzufügen, um andere zu warnen, bis ich testen kann, ob es funktioniert. Wenn Sie eine funktionierende Implementierung sehen möchten, überprüfen Sie das Repo für meine persönliche Website (evanplaice.com). –

+0

@jjwon Ich habe überprüft, dass die Markdown-Komponente funktioniert, wenn sie über JSPM installiert wird. Ich habe auch ein separates Projekt erstellt, um seine Nutzung zu demonstrieren. https://github.com/evanplaice/ng2-markdown-component-demo –