Question

我一直在尝试将数据从主布局index.html文件传递到角度根/起始组件<my-app>。很遗憾，我无法像我这样传递它们：<my-app [bodyData]="'passed'" ></my-app>来自我的index.html。

任何人都可以帮助我如何通过它们？提供了测试链接。

Plunker Test App Link

Answer 1

属性绑定不适用于根组件，即您引导的组件。

这不起作用的原因是您放置的index.html不是角度组件。因此，Angular不会编译这个元素。 Angular不会在运行时读取属性值，只是在编译期间，否则，我们会受到性能影响。（托比亚斯博世）

看到这个问题：

Angular 2 input parameters on root directive

解决方法是利用DOM：

<my-app bodyData="passed" ></my-app>

并在组件中：

@Component({
  selector: 'my-app',
  template: `
    (...)
  `
})
export class MyAppComponent {
  constructor(private eltRef:ElementRef) {
    let prop = eltRef.getAttribute('bodyData');
  }
}

这只适用于字符串属性......

Answer 2

正如@Thierry所述，他提出的方法仅对传递字符串属性有效。下面是一个方法，您可以通过该方法传入具有已定义属性的对象。

为要传递的数据创建一个类。

appdata.ts

export class AppData {
  public isServerRunning: boolean;
  public isDataFromMemory: boolean;
}

在包含启动数据的窗口对象上定义实例

的index.html

<script>window.APP_DATA = { isServerRunning: false, isDataFromMemory: false }

告诉引导代码。

main.tss

import { AppData } from './app/appdata';

通过服务向您的组件提供数据

app.module.ts

import { AppData } from './appdata';
...
providers: [AppData,
{
  provide: AppData,
  useValue: window['APP_DATA']
}
],

访问组件中的数据

app.component.ts

constructor(appData:AppData) {
    console.log('AppComponent - ', appData);
}

Answer 3

我尝试了同样的方案。但我得到的值为null。

在我的HTML中，我有标签

<my-app myattr="passed" >Loading ..</my-app>

在我使用过的组件中

constructor(private _elementRef: ElementRef){
    let native = this._elementRef.nativeElement;
    let test = native.getAttribute("myattr");
    alert(test);
}

该警报值将为空

Answer 4

恢复长期死亡的主题永远是可爱的。这是我的解决方案。我在localStorage中使用了index.html：

<script>
      localStorage.setItem('startpath', window.location.pathname);
</script>

然后只需app.component：

ngOnInit() {

    var startpath = localStorage.getItem('startpath');
    if (startpath) {
        localStorage.removeItem('startpath');
        this._router.navigate([startpath]);
    } else
        this._router.navigate(['/dashboard']);
}

将数据从html主体传递到根组件

4 个答案: