Question

我试图弄清楚如何使用角度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打印到{{text}}

时，dom支持此功能

Answer 1

问题是你使用[text]（插值），其值不是表达式。 TypeScript会遇到同样的问题。你可以试试这个：

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

如果是表达式：

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

如果您想使用[text]，则需要使用＆＃39;＆＃39;来定义表达式：

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

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

使用es5和es6将输入注入到组件构造函数中

1 个答案: