Question

我正在尝试使用Razor生成Angular模板中使用的html。我正在使用Angular v 2.0.0。我有一个看起来像这样的Contract.cshtml：

<script>
   System.import('contract.js').catch(function(err){ console.error(err); });
</script>
<my-contract>
    <h1>Hello {{name}} this is a quick starter for angular 2 app</h1>
</my-contract>

看起来像

的Contract.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ContractModule } from './app/Contract/contract.module';
platformBrowserDynamic().bootstrapModule(ContractModule);

看起来像：

的contract.component.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ContractComponent }  from './contract.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ ContractComponent ],
  bootstrap:    [ ContractComponent ]
})
export class ContractModule { }

和contract.component.ts看起来像：

import { Component } from '@angular/core';
@Component({
    selector: 'my-contract'
 })
export class ContractComponent  { 
    public name = 'Nigel Findlater';
    consturctor() {} 
}

当我跑步时，我得到了

Error: Error: No template specified for component ContractComponent    
        at DirectiveNormalizer.normalizeDirective (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:13476:21)                at RuntimeCompiler._createCompiledTemplate (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16869:210)
            at eval (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16807:43)
            at Array.forEach (native)
            at eval (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16805:50)
            at Array.forEach (native)
            at RuntimeCompiler._compileComponents (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16804:45)
            at RuntimeCompiler._compileModuleAndComponents (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16741:39)
            at RuntimeCompiler.compileModuleAsync (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16732:23)
            at PlatformRef_._bootstrapModuleWithZone (http://localhost:2600/lib/@angular/core/bundles/core.umd.js:6954:29)
        Evaluating http://localhost:2600/contract.js
        Error loading http://localhost:2600/contract.js

我认为错误在contract.component.ts中，但我不知道如何在这里指定模板

Answer 1

Angular2不适用于Razor生成的模板。最好允许Angular2处理所有路由而不使用MVC，因为这会增加不必要的依赖性，这会使项目更难测试。

Answer 2

我使用Angular将大量工作从服务器卸载到客户端，并使用更少的资源托管复杂的网站。这些网站不是SPA。在这种情况下，使用ASP.NET路由器和razor生成的模板（有时是预编译的）非常有用。我在Angular中使用剃刀生成的模板遇到的唯一问题是 webpack 的配置方式。删除 angular2-template-loader 后，一切顺利进行。

使用Razor生成Angular2模板

2 个答案: