Угловые 2 включают HTML-шаблоны

Question

В угловых 2 мне нужно создать большой HTML-шаблон с избыточными частями. Поэтому я хочу создать несколько html-шаблонов и соединить их вместе, включив их в основной html-файл (например, ng-include в angular1)

Но как я могу включить суб-шаблоны в основной шаблон?

пример:

<!-- test.html -->

<div>
    this is my Sub-Item
    <!-- include sub1.html here-->
</div>
<div>
    this is second Sub-Item
    <!-- include sub2.html here-->
</div>

-

<!-- sub1.html -->
<div>
    <button>I'am sub1</button>
</div>

-

<!-- sub2.html -->
<div>
    <div>I'am sub2</div>
</div>

Answer 1

Вы можете создавать такие компоненты, как sub1 sub2 и т. Д. И на эти дочерние компоненты добавить эти HTML-файлы в качестве шаблона.

На основной html вызовите селекторы компонентов соответственно. Это будет работать

Answer 2

Позвольте мне прежде всего сказать вам, что ng-include от Angular1.x не поддерживается Angular2 так очевидно $Compile нет в Angular2, Итак, вы можете продолжить CRF-ComponentFactoryResolver как показано здесь, чтобы добавить HTML динамически с угловым контекстом.

ДЕМО - (CFR): https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview

---

Если ваш HTML-фрагмент имеет угловой контекст, вы должны использовать CFR-ComponentFactoryResolver,

Как в sub1.html, у тебя есть button Вы можете щелкнуть по нему и запустить событие щелчка. Это может быть достигнуто с CFR как показано ниже,

Вы можете многое сделать с CRF, Это, наверное, самый простой пример.

@Component({
  selector: 'my-app',
  template: `

     <button (click)="addComponents()">Add HTML (dynamically using CRF)</button>

     <h1>Angular2 AppComponent</h1>
     <hr>

     <div>
     <h5>sub1.html goes here</h5>
      <div class="container">
        <template #subContainer1></template>
      </div>
     </div>

     <hr>
     <h5>sub2.html goes here</h5>
     <div class="container">
        <template #subContainer2></template>
     </div>
  `,

})
export class App {
    name:string;
    @ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;
    @ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef;
    constructor(
      private compFactoryResolver: ComponentFactoryResolver
      ) {
      this.name = 'Angular2'
    }

    addComponents() {

      let compFactory: ComponentFactory;

      compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
      this.subContainer1.createComponent(compFactory);


      compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component);
      this.subContainer2.createComponent(compFactory);
    }
  }
}