角2模板

Question

我想利用Angular2和ASP.NET MVC (而不是核心)。我的目标是在服务器端生成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 (剃刀引擎)生成这样的标记：

   <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可能允许使用它，但我不知道这一点。

Angular2还会执行而不是处理任何由于安全原因而添加到根元素中的绑定(<my-app [someProp]="xxx" (click)="doSomethign()"></my-app>)。