Вводить входные данные в конструктор компонентов с es5 и es6

Question

Я пытаюсь выяснить, как получить входные данные, используя синтаксис es5 и es6 в angular 2. Я знаю, что это возможно, но единственная документация, которую я могу найти, использует символ @, который, как я понимаю, является просто синтаксисом для компилятора, но я не возможность использовать компилятор, поэтому я должен написать свой код только на es5 и es6 без компилятора и без машинописи (поверьте мне, я пытался получить компилятор машинописи на моем компьютере, но в моей нынешней среде я не в состоянии.) Кто-нибудь знает, как чтобы заставить входы работать, используя только es5 и es6. вот что я пытался, но я продолжаю думать, что мне нужен какой-то инжектор для ввода, но я не могу найти никакой документации по инжектору, кроме синтаксиса машинописи

app.headerbtn = ng.core.Component({
    selector : 'header-btn',
    template : "<div class='headerbtn'>hello {{text}}</div>",
    inputs : ["text"]
}).Class({
    constructor : [function() {
        console.log(this);
    }],
    ngDoCheck : function() {
        this.text=this.text||'hi';
        console.log(this);
    }
});

тогда мой HTML

<header-btn [text]='hello world'></header-btn>

компонент успешно загружен, и он выводит объект конструктора на консоль дважды, проблема заключается в том, что первый является пустым объектом (что может иметь смысл, поскольку он еще не был инициализирован), но второй имеет текст, равный "привет" это означает, что this.text не определен ранее. или на любых последующих проверках, и DOM поддерживает это, поскольку он печатает привет в {{text}}

Answer 1

Проблема в том, что вы используете [текст] (интерполяция) со значением, которое не является выражением. У вас будет такая же проблема с TypeScript. Вы можете попробовать это:

<header-btn text="hello world"></header-btn>

В случае выражения:

<header-btn text="someExpression"></header-btn>

Если вы хотите использовать [текст], вам нужно определить выражение с помощью '':

<header-btn [text]="\'hello world\'"></header-btn>

Вот план, описывающий это: https://plnkr.co/edit/cGmZgs9dCCyf8ICC8q9N?p=preview