我一直在尝试将数据从主布局 index.html 文件传递到角度根/起始组件<my-app>。不幸的是，我无法像这样传递它们：<my-app [bodyData]="'passed'" ></my-app> from my index.html。
谁能帮助我如何通过它们？提供了一个测试链接。
【问题讨论】：
App 组件中创建一个服务并从该服务中获取数据
标签： angular typescript
正如@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);
}
【讨论】：
属性绑定不适用于根组件，即您引导的组件。
这不起作用的原因是您放置的 index.html 不是角度组件。因此，Angular 不会编译这个元素。 Angular 不会在运行时读取属性值，只会在编译时读取，否则我们会受到性能影响。 （托拜厄斯·博世）
看到这个问题：
一种解决方法是利用 DOM：
<my-app bodyData="passed" ></my-app>
在组件中：
@Component({
selector: 'my-app',
template: `
(...)
`
})
export class MyAppComponent {
constructor(private eltRef:ElementRef) {
let prop = eltRef.getAttribute('bodyData');
}
}
这仅适用于字符串属性...
【讨论】：
我尝试过同样的场景。但我得到的值为 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);
}
那个警报值是空的
【讨论】：
复活早已死去的话题总是很可爱的。这是我的解决方案。我在index.html中使用了localStorage：
<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']);
}
【讨论】：