Question

我有一个用C＃编写的ASP.NET 4 Web Forms项目。我想添加Angular 2.我在网上看到了很多使用ASP.NET 5的例子，但我无法弄清楚如何在我的项目中做到这一点。

Answer 1

已经面临类似的要求并对此做了一些POC并且肯定会继续前进。我使用每个.aspx页面作为独立的角度2 SPA应用程序。这意味着每个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));

每个aspx页面都会有一个app.component.ts（为home.aspx命名为home.component.ts）文件。现在在包含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命名为main-home.ts。

希望这可以帮助你和其他人。此外，我愿意接受这种方法的建议和审查/替代解决方案。

供参考，请参阅：bootstrapping-multiple-angular-2-applications-on-the-same-page

Answer 2

我完全同意@ pawan的答案，但是@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);  
        }
    }
}

这是基于页面网址的方式，我们可以动态地引导我们的Component并为每个页面保存很多main.ts和app.component.ts文件。

为此，您需要将每个组件的条目添加到NgModule的entryComponents数组中，如下所示：

@NgModule({
  entryComponents : [
        HomeComponent, 
        AboutComponent, 
    ]
})

希望这有帮助。

Answer 3

将index.html基本路线更改为您的网页

<base href="/YourWebPageRoute">

在网络表单中包含该页面

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

如何在.NET 4 Web窗体项目中使用Angular 2？

3 个答案: