Question

我在Angular 1应用程序中使用Angular 2组件时遇到了一些难题。我使用ngUpgrade成功引导了应用程序，我的组件按预期显示，但是绑定有些奇怪。

这里是另一个Angular 1指令中使用的组件的表示：

<stdbutton name="name-{{someId}}"
           (click)="doSomething()"
           [highlighted]="true"
           [size]="small">Clicky</stdbutton>

[highlighted]和[size]都打算用作元素的可选属性。

如您所见，我同时使用ng1和ng2样式绑定。 ng1绑定工作正常 - 输出HTML将name="name-12345"。奇怪的是在ng2绑定中：

(click)不执行事件处理程序
[highlighted]处于奇怪状态
[size]始终未定义

这是组件定义：

import {Component, Input} from '@angular/core';

@Component({
    selector: 'stdbutton',
    inputs: ['size', 'highlighted'],
    template: `
        <div [class]="buttonClass"
             [ngClass]="{stdbuttonhighlighted: highlighted}">
            <ng-content></ng-content>
        </div>
        `
})
export class StdButtonComponent {
    @Input() size: any;
    @Input() highlighted: boolean;

    buttonClass: string;

    constructor() {
        this.buttonClass = 'stdbutton' + (this.size ? this.size : '');
        console.log(this.highlighted);
        console.log(this);
    }
}

当我说[highlighted]处于一种奇怪的状态时，这就是我的意思。查看构造函数中的两个console.log语句。现在，输出：

stdbutton.component.ts:21 undefined

stdbutton.component.ts:22 
StdButtonComponent {buttonClass: "stdbutton"}
  buttonClass: "stdbutton"
  highlighted: true
  size: undefined

因此，this.highlighted在两次调用之间从undefined转到true，无论如何，this.size仍为undefined。

Answer 1

使用[...]时，您将尝试根据组件的属性评估表达式。如果你想设置字符串＆＃34; value＆＃34;你可以使用：

[size]="'small'"
size="small"

ng2组件属性混乱

1 个答案: