javascript - 使用 es5 和 es6 将输入注入(inject)到组件构造函数中

Question

我试图找出如何在 Angular 2 中使用 es5 和 es6 语法获取输入。我知道这是可能的，但我能找到的唯一文档使用 @ 符号，据我所知，这只是编译器的语法但我无法使用编译器，所以我必须只用 es5 和 es6 编写代码，没有编译器，没有任何 typescript (相信我，我尝试在我的计算机上安装 typescript 编译器，但在我当前的环境中我无法做到。)任何人都知道如何仅使用 es5 和 es6 让输入工作。这是我尝试过的，但我一直认为我需要某种注入(inject)器来进行输入，但除了 typescript 语法之外，我找不到有关注入(inject)器的任何文档

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>

组件已成功引导，并且它将构造函数对象打印到控制台两次，问题是第一个是空对象(这可能是有道理的，因为它尚未初始化)，但第二个的文本等于“hi”表示 this.text 之前未定义。或者在任何后续检查中，并且 dom 支持这一点，因为它将 hi 打印到 {{text}}

Answer 1

问题在于您使用的 [text](插值)与不是表达式的值。使用 TypeScript 也会遇到同样的问题。你可以试试这个:

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

对于表达式:

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

如果要使用[text]，则需要用''定义表达式:

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

这里有一个 plunkr 描述了这一点:https://plnkr.co/edit/cGmZgs9dCCyf8ICC8q9N?p=preview