Lo más cercano a ng-include es la directiva ngTemplateOutlet. Debe pasarle un TemplateRef y un contexto opcional. Algo como eso:

 @Component({ selector: 'child', template: ` <div> here is child template that includes myTemplate <ng-container [ngTemplateOutlet]="myTemplate"></ng-container> </div>` }) export class ChildComponent { @Input() myTemplate: TemplateRef<any>; } @Component({ selector: 'app-root', template: ` <p>Parent</p> <child [myTemplate]="myTemplate"></child> <ng-template #myTemplate>hi julia template!</ng-template> ` }) export class AppComponent { @ViewChild('myTemplate', {read: TemplateRef}) myTemplate: TemplateRef<any>; }

1. El componente principal consulta la plantilla y la pasa al componente secundario
2. El componente secundario usa la directiva ngTemplateOutlet para crear una vista y representarla.

//ng-include equivalent in Angular2/4 // How to create directive for ng-clude in Angular2/4 import { Directive, ElementRef, Input, OnInit } from '@angular/core'; import { Headers, Http, Response } from '@angular/http'; @Directive({ selector: 'ngInclude' }) export class NgIncludeDirective implements OnInit { @Input('src') private templateUrl: string; @Input('type') private type: string; constructor(private element: ElementRef, private http: Http) { } parseTemplate(res: Response) { if (this.type == 'template') { this.element.nativeElement.innerHTML = res.text(); } else if (this.type == 'style') { var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(res.text())); head.appendChild(style); } } handleTempalteError(err) { } ngOnInit() { this. http. get(this.templateUrl). map(res => this.parseTemplate(res)). catch(this.handleTempalteError.bind(this)).subscribe(res => { console.log(res); }); } } enter code here // html code < ngInclude src = "{{src}}" type = "template" > < /ngInclude>

Pensando desde angular2+, es mejor declarar la plantilla secundaria como componente:

 @Component({ selector: 'app-child', template: ` <ng-container> here is child template that includes myTemplate </ng-container>` }) export class ChildComponent { } @Component({ selector: 'app-root', template: ` <p>Parent</p> <app-child ></app-child> ` }) export class AppComponent { }