模板属性未定义而其他属性是? [英] Template property is undefined while others are?

问题描述

我正在尝试定义一个具有多个属性的简单组件:

I'm trying to define a simple component, with several properties :

randomFile.html:

<dico [dicoID]="201125" [dicoLang]="en" [delayedLoading]="false"></dico>
<dico [dicoID]="201126" [dicoLang]="en" [delayedLoading]="false"></dico>

这是我的组件定义:

dico.component.ts:

@Component({
    selector: 'dico',
    template: `{{text}}`
})

class Dico implements AfterViewInit {
    @Input() private dicoID: string;
    @Input() private dicoLang: string;
    @Input() private delayedLoading :boolean;
    public text: string = null;

    constructor(...) {
    }

    ngAfterViewInit() {
        alert(this.dicoID + " " + this.dicoLang + " " + this.delayedLoading);

        // Output 1 => 201125 undefined false 
        // Output 2 => 201126 undefined false 
        (...)
    }

    (...)
}

----

@Component({
    template: `<dico [dicoID] [dicoLang] [delayedLoading]></dico>`,
    directives: [Dico]
})

// Définition du composant DicoComponent
export class DicoComponent {

}  

正如您在 ngAfterViewInit 中看到的，第二个属性dicoLang"未定义，我不明白为什么...我做错了什么吗?

As you can see in the ngAfterViewInit, the second property "dicoLang" is undefined, and I don't understand why... Am I doing something wrong ?

推荐答案

如果你想直接在属性绑定中传递值，你应该使用 attribute 而不是 property binding.如果您使用 [](属性绑定)包装您的属性，它将尝试使用 Component 上下文(this)评估该变量.

If you want to directly pass values inside property binding you should do use attribute instead of property binding. If you wrap your attribute with [] (property binding), it will try to evaluate that variable with Component context(this).

<dico dicoID="201125" dicoLang="en" [delayedLoading]="false"></dico>
<dico dicoID="201126" dicoLang="en" [delayedLoading]="false"></dico>

这篇关于模板属性未定义而其他属性是?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！