Question

我想在ASP.NET MVC（非核心）中使用Angular2。我的目标是在服务器端生成UI。我有一个模型，我可以在它上面生成一个标记。

我有几个Angular2组件：

//1
@Component({
selector: 'my-app',
template: `<h1>Angular</h1>`
})
export class AppComponent {}

//2
@Component({
selector: 'my-text',
template: `<div><input type="text" placeholder="default"/></div>`
})
export class MyTextComponent {}

我使用MVC（razor引擎）生成标记，如下所示：

   <my-app>
   <my-text> </my-text>
   <my-text> </my-text>
   <my-text> </my-text>
   ...
   <my-text> </my-text>
</my-app>

不幸的是，当角度应用程序启动时，我的标记转换为

<my-app><h1>Angular</h1></my-app>

当我在AppComponent模板中添加标记时，如下所示：

   template: `<h1>Angular</h1> 
   <my-text> </my-text>
   <my-text> </my-text>
   <my-text> </my-text>
   ...
   <my-text> </my-text>`

一切正常 - 选择器由角度处理。为什么会发生这种情况，以及如何利用MVC标记？我期望angular2接收标记MVC并对其进行处理。

Answer 1

当Angular2引导根组件时，它将组件应用于与其选择器匹配的元素。清除目标元素的内容。

Angular2不支持对根元素进行转换。

据我记得，ngDowngrade或ngUpgrade可能允许它，但我不知道。

出于安全原因（<my-app [someProp]="xxx" (click)="doSomethign()"></my-app>），Angular2也会不处理添加到根元素的任何绑定。

Angular 2模板

1 个答案: