如何在.NET 4 Web Forms项目中使用Angular 2?

我有用C#编写的ASP.NET 4 Web Forms项目。我想添加Angular 2.我在网上看到很多使用ASP.NET 5的例子,但我无法弄清楚如何在我的项目中执行它。如何在.NET 4 Web Forms项目中使用Angular 2?

回答:

已经面临类似的要求,并做了一些POC这一点,并肯定会继续与它。我作为独立的角度2 SPA应用程序与每个.aspx页面一起工作。这意味着每个aspx页面都有自己的App.Component.ts和main.ts文件(基于Angular 2文档的文件名)。 main.ts文件包含引导应用程序的代码(下面的示例代码),因此每个.aspx页面都会有一个main.ts文件。

import {bootstrap} from 'angular2/platform/browser';  

import {HTTP_BINDINGS} from 'angular2/http';

import {HomeComponent} from './home.component';

bootstrap(HomeComponent, [HTTP_BINDINGS])

.catch(err => console.error(err));

会有一个app.component.ts(将其命名为home.component.ts我home.aspx)文件为每个aspx页面。 现在包含Sytem.config细节我定义为我的home.aspx新地图和包项的配置文件,如下图所示:

System.config({  

transpiler: 'typescript',

typescriptOptions: {

emitDecoratorMetadata: true,

experimentalDecorators: true

},

map: {

app: '../../Javascript/angular/app',

home: '../../Javascript/angular/home'

},

packages: {

app: { main: './main.ts', defaultExtension: 'ts'},

home: { defaultExtension: 'ts' }

}

});

最后我感动的System.import码部分到.aspx页面(下面的代码)。每个页面都将导入自己在sytem.config中定义的包。

<script>  

System

.import('home/main-home')

.catch(console.error.bind(console));

</script>

在这里,我有一个名为我的main.ts作为主home.ts。

希望这可以帮助你和其他人。此外,我对这种方法的建议和评论/替代解决方案持开放态度。

仅供参考,请参阅:bootstrapping-multiple-angular-2-applications-on-the-same-page

回答:

改变您的index.html基本路线到您的网页

<base href="/YourWebPageRoute"> 

包括Web窗体

<% Response.WriteFile("index.html"); %> 

回答:

我完全@帕万的同意内页回答,但是@pawan我找到了一个很好的解决方案。这个解决方案无疑帮助了我,并希望它能帮助你们所有人。

我们不需要为每个页面创建main.ts和AppComponent.ts。

我们需要使我们的主要组件是我们的引导动态。在我们的例子中,在app.component.ts中,我基于当前页面的url动态地引导组件。

假设你的页面是home.aspx,然后boostrap HomeComponent或about.aspx然后boostrap AboutComponent 我正在通过执行ngDoBootstrap方法来做到这一点,如下所示。

export class AppModule { 

url : string;

constructor(@Inject(DOCUMENT) private document: any){

this.url = this.document.location.href.toLowerCase();

}

ngDoBootstrap(app:ApplicationRef){

if(this.url.indexOf("home.aspx") > 0){

app.bootstrap(HomeComponent);

}

else if(this.url.indexOf("about.aspx") > 0){

app.bootstrap(AboutComponent);

}

}

}

这是怎么了基于网页的网址,就可以动态地引导我们的组件,节省main.ts和app.component.ts的很多文件每一页。

对于这一点,你需要为每个组件添加进入NgModule的entryComponents排列如下:

@NgModule({ 

entryComponents : [

HomeComponent,

AboutComponent,

]

})

希望这有助于。

以上是 如何在.NET 4 Web Forms项目中使用Angular 2? 的全部内容, 来源链接: utcz.com/qa/257901.html

回到顶部