使用 ES5 和 ES6 将输入注入组件构造函数

inject inputs into component constructor with es5 and es6

本文关键字：注入 组件 构造函数 输入 ES5 ES6 使用      更新时间：2023-09-26

im 试图弄清楚如何使用 Angular 5 中的 ES6 和 ES2 语法获取输入。 我知道这是可能的，但我能找到的唯一文档使用 @ 符号，据我所知，这只是编译器的语法，但我无法使用编译器，所以我必须只用 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);
    }
});

然后我的网页

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

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

问题是您将 [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

相关文章：