Question

我有一个服务器端渲染页面，我希望能够从网页动态设置Angular组件的输入值。

<body>
  <testcmp [testa]="'Blue322'"></testcmp>
</body>

http://plnkr.co/edit/YoZOnGWI6R1Urj89tJAZ?p=preview

我注意到我只能从模板（＆＃39; testb＆＃39;在我的plunkr中）设置组件的值，而不是从外部设置（＆＃39; testa＆＃39;）。

我需要做些什么才能设置＆＃39; testa＆＃39;来自网页？

Answer 1

如果我没记错的话，你就不能在应用的ROOT组件上使用输入。看到： Angular 2 input parameters on root directive

https://github.com/angular/angular/issues/1858#issuecomment-151326461

这不起作用的原因是你的index.html在其中   你放置的不是一个角   零件。因此，Angular不会编译这个元素。和   Angular不会在运行时读取属性值，仅在期间读取   编译时间，否则我们会受到性能影响。

即。这是按预期工作的，请使用@Mewel的代码段   描述...

Answer 2

我认为正确的方法应该是创建角度应用程序，并在应用程序内部使用组件。

您不应该直接在index.html页面上使用这些组件，应该在引导应用程序之前使用。

编辑：您可以尝试此解决方法

<testcmp testa="Blue322"></testcmp>

import {Component, Input, ElementRef} from 'angular2/core';
...
export class TestCmp {
    testa: string;

    constructor(public elementRef: ElementRef) {
    }

    ngOnInit(){
      this.testa = this.elementRef.nativeElement.getAttribute('testa');
    }
}

从网页设置角度组件输入值

2 个答案: