使用 es5 和 es6 将输入注入组件构造函数
inject inputs into component constructor with es5 and es6
我正在尝试弄清楚如何使用 angular 中的 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}}
问题是您将 [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
我正在尝试弄清楚如何使用 angular 中的 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}}
问题是您将 [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