我有一个全局的js变量定义如下(@Url是一个ASP.Net MVC的html帮助器,它将被转换为字符串值):
<script> var rootVar = '@Url.Action("Index","Home",new { Area = ""},null)'; System.import('app').catch(function(err){ console.error(err); }); </script>
如何在角度2组件中访问rootVar?我曾经以角度1.5的方式使用窗口服务,有没有类似的方式在角度2?
具体来说,我想使用该rootVar变量来帮助在此组件中生成templateUrl:
import { Component,Inject} from '@angular/core'; @Component({ selector: 'home-comp',templateUrl: '../Home/Root' }) export class HomeComponent { constructor( ) { } }
解决方法
您需要更新引导应用程序导出功能的文件:
import {bootstrap} from '...'; import {provide} from '...'; import {AppComponent} from '...'; export function main(rootVar) { bootstrap(AppComponent,[ provide('rootVar',{ useValue: rootVar }) ]); }
现在您可以通过这种方式从index.html文件中提供变量:
<script> var rootVar = '@Url.Action("Index",null)'; System.import('app/main').then((module) => { module.main(rootVar); }); </script>
然后,您可以通过以下方式将rootVar注入到组件和服务中:
从’@ angular / core’导入{Component,Inject};
@Component({ selector: 'home-comp',templateUrl: '../Home/Root' }) export class HomeComponent { constructor(@Inject('rootVar') rootVar:string ) { } }