Question

在我们的ASP.NET核心应用程序中，我们使用Ajax动态加载一些HTML部分视图，而不刷新页面。在这些视图中，我们添加了Angular 2组件，因此当我们显示部分视图时，我们需要引导组件：这就是我们在可注入服务中所做的。

部分视图：

<home></home>

服务：

@Injectable()
export class ComponentService {
    constructor() { }

    loadComponent(path: string): void {
        System
            .config({
                packages: {
                    app: {
                        defaultExtension: 'js',
                    }
                }
        });

        System
            .import('app/home/home.component')
            .then((component) => {
                console.log("Import done !");
            })
            .catch((error) => {
                console.error.bind(console);
            });
    }
}

注意：直接插入局部视图中的完全相同的代码第一次起作用，之后我有一个错误：“angular2.dev.js：23941 EXCEPTION：预计不在Angular Zone中，但它是！ ”

我在控制台中看到没有错误（在我的服务中），因为我看到“导入已完成！”和component对象已加载，但未加载。

组件：

@Component({
    selector: 'home',
    templateUrl: 'home.component.html'
})
export class Home {
    // Some logic    
}

bootstrap(Home,
    [
        HTTP_PROVIDERS,
        HomeService
    ]);

有什么想法吗？这背后的主要思想是：如何多次加载一个Angular 2组件？

Answer 1

实际上你可以多次引导但不是同一个组件。这是Angular2的限制

那就是说，我也会定义一次SystemJS的配置。

我不知道实际使用的是什么情况，Angular2提供了一种使用DynamicComponentLoader动态加载其他组件（例如，自举组件）中的组件的方法。

有关详细信息，请参阅此链接：

`https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html

Answer 2

<强>更新

从beta.16开始，{p> .dispose()为destroy()

<强>原始

不确定你的意思是“第一次，之后”

您可能需要在再次引导它之前处置该组件

bootstrap(Home,
    [
        HTTP_PROVIDERS,
        HomeService
    ]).then((ref => {
      xxx = ref; // store ref
    });

销毁组件

xxx.dispose();

然后你应该能够再次添加它。

可注射服务中的Bootstrap组件

2 个答案: