我期待从另一个模块以及窗口对象访问Angular 2组件.窗口对象仅用于在浏览器控制台中播放而不是实际用于生产(fyi).我以为我可以'导出默认类MyComponent',但这似乎不起作用.我如何从另一个模块/窗口访问实例化的MyAppComponent类?
<body>
<my-app></my-app>
<script>
System.import('ang').then(function (ang) {
window.ang = ang;
});
</script>
</body>
Run Code Online (Sandbox Code Playgroud)
...
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: `<h1>Hello {{ count }}</h1><br>`
})
class MyAppComponent {
public count: number;
constructor() {
this.count = 0;
}
public increment(): void {
this.count++;
}
}
bootstrap(MyAppComponent);
Run Code Online (Sandbox Code Playgroud)
然后想做这样的事情:
ang.increment();
Run Code Online (Sandbox Code Playgroud)
这是另一个解决方案,它利用了一些 Angular 内部结构。我可以验证这在 Angular 6 中是否有效,但当然,请注意 YMMV.
同样毫无价值的是,TypeScript 对此不太满意,所以在我的代码中,我不得不到处进行转换。为了代码清晰起见,我在这里删除了强制转换。
const debugElement: DebugElement = window.ng.probe(document.querySelector('my-app'))
const app: MyAppComponent = debugElement.componentInstance;
app.increment();
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
989 次 |
| 最近记录: |