angular2中「ng-include」的替代選擇是什麼？

Question

有沒有其他角度來實現ng-include在angularjs中做什麼？

Answer 1

最接近ng-include的是ngTemplateOutlet指令。你需要傳遞一個TemplateRef給它和可選的上下文。類似的東西：

@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. 父組件querys模板，並將其傳遞到子組件
2. 子組件使用ngTemplateOutlet指令來創建視圖和渲染。

Answer 2

//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>