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

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输入参数

解决方法是利用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 }

告诉引导代码。

主目录

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);
}