Пользовательский шаблон пользователя для компонента в угловом 2

Question

У меня есть компонент, который имеет его дефолтный шаблон:

import {Component} from 'angular2/core'; 

    @Component({ 
     selector: 'my-component', 
     template: ` 
      <div class="container"> 
       <div class="content"> 
        <div *ngIf="contentRef.childNodes.length == 0">DEFAULT: <b>{{contentData}}</b></div> 
        <div #contentRef><ng-content select=".content"></ng-content></div> 
       </div> 
      </div> 
     ` 
    }) 
    export class MyComponent { 
     contentData = "DATA"; 
    } 

Я хотел бы, чтобы пользователь мог указать свои собственные шаблоны для некоторых частей компоненты при использовании. Таким образом, можно записать следующим образом:

import {Component} from 'angular2/core'; 
    import {MyComponent} from './my.component'; 

    @Component({ 
     selector: 'my-app', 
     directives: [MyComponent], 
     template: ` 
      <my-component></my-component> 
      <br/> 
      <my-component> 
       <div class="content"> 
        CUSTOM: <i>{{contentData}}</i> 
       </div> 
      </my-component> 
     ` 
    }) 
    export class AppComponent { } 

Она производит следующую разметку:

<my-app> 
     <my-component> 
     <div class="container"> 
      <div class="content"> 
       <!--template bindings={}--><div>DEFAULT: <b>DATA</b></div> 
       <div></div> 
      </div> 
     </div> 
    </my-component> 
     <br> 
     <my-component> 
     <div class="container"> 
      <div class="content"> 
       <!--template bindings={}--> 
       <div><div class="content"> 
       CUSTOM: <i></i> 
      </div></div> 
      </div> 
     </div> 
    </my-component> 
    </my-app> 

Так имущество компонента «contentData» не отображается в пользовательском шаблоне. Можно ли каким-либо образом предоставить настраиваемый шаблон с определенным контекстом привязки? Или есть лучший способ реализовать случай с пользовательским шаблоном пользователя?

Answer 1

How to realize website with hundreds of pages in Angular2 показывает подход.

Это не официальное решение, и для меня это похоже на то, что это, скорее всего, сломается до финальной версии. Angular2 имеет сильную тенденцию к статическому построению и разрешению привязок.

Либо вы можете работать с DynamicComponentLoader, либо не используете функции привязки Angulars для динамически добавленного контента.