Question

This示例显示了如何在子组件上使用@Input（）注释。我的问题是你如何在根组件上使用它？例如，如果您修改上面链接上的代码：

@Component({
selector: 'app',
template: `
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
`,
directives: [BankAccount]
})
class App {
    @Input() something: string;
}

bootstrap(App);

在html中：

<app something="Test"></app>

以上示例永远不会更新App组件上的某些属性。

Answer 1

This Tobias Bosch's comment已回答您的问题：

这不起作用的原因是您放置<app something="Test"></app>的index.html不是角度组件。因此，Angular不会编译这个元素。 Angular在运行期间不会读取属性值，只是在编译期间，否则我们会受到性能影响。

因此，此时您无法在根元素上使用输入参数。

Answer 2

我认为你仍然可以使用：

class App {
    constructor(elm: ElementRef) {
        this.something = elm.nativeElement.getAttribute('something'); 
    }
}

根指令上的Angular 2输入参数

2 个答案: