Question

每当我必须在页面中动态包含一个模板时，我一直在使用角度1中的ng-include。

现在如何在角度2中实现这一点。我试过搜索并找到了这些：

https://groups.google.com/forum/#!topic/angular/ROkKDHboWoA，

https://github.com/angular/angular/issues/2753

有人可以解释如何在angular2中执行此操作，因为链接说由于某些安全原因而不包括ng-include。

或至少如何在templateUrl属性中使用可验证的值，以便可以在服务器端处理可验证值以提供模板...

Answer 1

正如你在Angular回购的issue中看到的那样，很可能我们不会得到那个指令。我们是否需要这个指令已经进行了长时间的讨论，如果没有提供我们如何通过自己实现它。

我试图举例说明如何实现它。

Private Sub ComboBox1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ComboBox1.SelectedIndexChanged
    If ComboBox1.SelectedIndex = 0 Then
        Dim dbprovider As String = "PROVIDER = Microsoft.ACE.OleDb.12.0;"
        Dim dbsource As String = "DATA SOURCE = \\Mac\Home\Desktop\Dalangs\Database De Empleados.accdb"
        DataGridView1.Show()
        DataGridView2.Hide()
        con.ConnectionString = dbprovider & dbsource
        con.Open()
        da.GetFillParameters()
        con2.Close()
        MsgBox("Employees successfully loaded")

    ElseIf ComboBox1.SelectedIndex = 1 Then
    Dim dbprovider As String = "PROVIDER = Microsoft.ACE.OleDb.12.0;"
    Dim dbsource As String = "DATA SOURCE = \\Mac\Home\Desktop\Dalangs\Database De Clientes.accdb"
    DataGridView2.Show()
    DataGridView1.Hide()
        con2.ConnectionString = dbprovider & dbsource
        con2.Open()
        da2.GetFillParameters()
    con.Close()
    MsgBox("Clients successfully loaded")

    End If
    Button4.Visible = True
End Sub

要进行演示检查，请Plunker。

Answer 2

实际上，角度2在当前构建中没有这个特征。另外，根据添加的链接，我认为不会包含此功能。

可以使用一段使用ajax调用动态添加模板的JavaScript。

或者将来可能会使用动态模板加载器库。

Answer 3

从 alpha.46 （和ES6 JS）：

在父文件导入文件中，您想要包含：

@Component({
  selector: 'account'
})
@View({
  templateUrl: './folder/containing/template.html'
})

这很容易。

如果您要导入组件，则可以在父文件中执行此操作：

import ComponentClassName from './folder/with/componentName';

...

@View({
  directives: [ComponentClassName]
})

在子 / component：

的导入文件中

定义您的ComponentClassName（您可以将templateUrl添加到@View，正如顶部所示。

不要忘记文件底部的export default ComponentClassName;。

Angular 2官方文档中的示例并不多，但您偶然发现了every once in a while。

Answer 4

正如@binariedMe准确描述的那样，出于安全考虑，ng-include在Angular 2中已关闭。推荐的方法是使用自定义指令，稍微增加程序开销。

此外，准备2.0的Angular代码：

myApp.directive('myInclude', function() {
    return {
        templateUrl: 'mytemplate.html'
    };
});

而不是在元素上使用ng-include，只需添加my-include：

<div my-include></div>

Answer 5

关注@binariedMe和此博客文章http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/，我能够构建一个可能适合您的解决方案。使用AJAX调用并从返回的html内容动态创建自定义组件应该在创建新的my-ng-include自定义指令时解决此问题。

import {
  Component,
  Directive,
  ComponentFactory,
  ComponentMetadata,
  ComponentResolver,
  Input,
  ReflectiveInjector,
  ViewContainerRef
} from '@angular/core';
import { Http } from '@angular/http';

export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
    const cmpClass = class DynamicComponent {};
    const decoratedCmp = Component(metadata)(cmpClass);
    return resolver.resolveComponent(decoratedCmp);
}

@Directive({
    selector: 'my-ng-include'
})
export class MyNgInclude {

    @Input() src: string;

    constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver, private http: Http) {
    }

    ngOnChanges() {
      if (!this.src) return;

      this.http.get(this.src).toPromise().then((res) => {
        const metadata = new ComponentMetadata({
            selector: 'dynamic-html',
            template: res.text(),
        });
        createComponentFactory(this.resolver, metadata)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
          });
      });
    }
}

只需按以下方式使用它：

<my-ng-include [src]="someChangingProperty"></my-ng-include>

templatURL中的动态模板，角度为2

5 个答案: