1

我试图弄清楚如何在 Angular 2 中使用 es5 和 es6 语法获取输入。我知道它可能，但我能找到的唯一文档使用 @ 符号，据我了解，这只是编译器的语法，但我不是能够使用编译器，所以我必须只用 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>

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

4

1 回答 1

0

问题是您将 [text] （插值）与不是表达式的值一起使用。TypeScript 也会有同样的问题。你可以试试这个：

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

在表达式的情况下：

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

如果要使用[文本]，则需要用''定义表达式：

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

这是一个描述这个的 plunkr：https ://plnkr.co/edit/cGmZgs9dCCyf8ICC8q9N?p=preview

于 2016-02-12T15:55:07.403 回答