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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有用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

回到顶部