Question

我对使用TypeScript的Angular2很陌生，并且遇到了我很长时间无法解决的问题：

我想为用户提供他们在视图中使用的某种小型组件工具包，以构建一个（真正的）小应用程序。因此，我需要一个应用程序组件，在初始化和检查每个子元素时，如果它已经导入，则能够遍历其所有子元素。如果没有，则导入它以启用其使用。

用html / code说出来 - 这就是我想要的：

<test-auto-import>
    <!-- freely use custom components, because the test auto import element
         will automatically take care of the imports when initializing -->
    <some-custom control="that is acutally not imported"></some-custom>
    <another-unimported></another-unimported>
</test-auto-import>

解决这个问题的基本思路是：

import { Component, OnInit } from '@angular/core'

@Component({
    selector: 'test-auto-import',
    templateUrl: 'test-auto-import.html',
    styleUrls: ['test-auto-import.css']
})

class TestAutoImportComponent implements OnInit
{
    ngOnInit() {
        // run through children and getting their tag names
        let app = document.getElementsByTagName('test-auto-import');
        let children = app.childNodes;
        let importNames = '';

        // so iterate now:
        for(let i =0; i< children.length; i++)
        {
           let child = children[i];
           // ---------------
           // todo: 
           // 1. import the component from generate path by tag name
           // 2. get the @Component directives array
           // 3. check whether the name is in it
           // 4. if not, add it
           // --------------- 
        }
}

所以基本上步骤1和2（也许是4步）是我无法以某种方式解决的关键步骤。我真的很绝望:(

强烈推荐任何帮助！先谢谢你们！

注意：由于自定义命名/结构约定，标记名称足以定义组件的正确路径，例如，标签名称“my-test”将静态导致路径“../ elements / my-test / my-test.component.ts”。

Answer 1

<强>更新

不再支持Angular2 final。见How to make directives and components available globally

<强>原始

您无法导入，具体取决于所使用的内容。您可以做的是提供所有组件并允许在全球范围内提供它们，如

export const MY_DIRECTIVES = [DirA, DirB, DirC];

用户需要导入MY_DIRECTIVES并像

一样使用它

provide(PLATFORM_DIRECTIVES, {useValue: [MY_DIRECTIVES], multi: true})

如何以RC.3方式执行此操作，请参阅Angular 2.0.0-rc.2: How to migrate PLATFORM_DIRECTIVES

Angular 2 RC1 - 自动导入基础组件内的所有已使用组件

1 个答案: