Question

我试图定义一个简单的组件，有几个属性：

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中看到的那样，第二个属性＆＃34; dicoLang＆＃34;是不确定的，我不明白为什么......我做错了什么？

Answer 1

如果要直接在属性绑定中传递值，则应使用attribute而不是property binding。如果使用[]（属性绑定）包装属性，它将尝试使用Component上下文（this）评估该变量。

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

Answer 2

与[]绑定 - 括号意味着绑定到变量或静态表达式。数字和布尔值本身就是静态表达式，因此绑定按预期工作。但是，如果你只是写[dicoLang]="en"，它需要一个名为＆＃39; en＆＃39;的变量。

您可以使用显式字符串进行绑定：

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

或没有括号的绑定：

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

模板属性是未定义的，而其他属性是？

2 个答案: