Angular 2 templates

Question

Я хочу использовать Angular2 с ASP.NET MVC (не ядром). Моя цель - создать пользовательский интерфейс на стороне сервера. У меня есть модель, и я могу создать базу разметки.

У меня есть несколько компонентов 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>).