Angular 2 RC1-自动将所有使用过的组件导入基本组件内 [英] Angular 2 RC1 - Auto import all used components inside a base component

问题描述

我对使用TypeScript的Angular2还是很陌生，但有一个问题我很长时间都无法解决:

I'm quite new to Angular2 with TypeScript and have a problem that I am not able to solve for a long time now:

我想为用户提供一些他们在视图内部使用的小型组件工具箱，以构建一个(真正的)小型应用程序.因此，我需要一个应用程序组件，该组件能够在初始化时遍历其所有子元素，并检查其每个子元素(无论是否已导入).如果没有，则将其导入以启用其用法.

I want to provide the user some kind of small components toolkit that they use inside the view, to build a (real) small app. Therefore I need an app component that is able to go through all its child elements when initializing and check for each of its children, if it is already imported or not. If not then import it in order to enable its usage.

以html/代码表达-这是我想要实现的目标:

Saying it in html / code - this is what I want to acchieve:

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

解决此问题的基本思路是:

The basic idea to solve this is:

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步)是我没有设法解决的关键步骤.我真的很绝望:(

So basically the steps 1 and 2 (maybe 4 as well) are the critical steps that I did not manage to solve in some way. I'm really getting desperate :(

强烈建议任何帮助！预先感谢大家！

ANY HELP IS HIGHLY RECOMMENDED! Thanks in advance guys!

注意:由于采用了自定义命名/结构约定，因此标签名称足以定义组件的正确路径，例如标记名称"my-test"将静态指向路径"../elements/my-test/my-test.component.ts".

推荐答案

更新

不再受Angular2 final支持.请参阅如何使指令和组件在全球范围内可用

Not supported in Angular2 final anymore. See How to make directives and components available globally

原始

根据所使用的内容，您无法导入.您所能做的就是提供所有组件，并允许像这样在全球范围内提供它们

You can't import depending on what's used. What you can do, is to provide all components and allow to provider them globally like

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

用户需要导入 MY_DIRECTIVES 并像使用它

The user needs to import MY_DIRECTIVES and use it like

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

有关如何以RC.3方式执行此操作，请参见

For how to do this the RC.3 way see Angular 2.0.0-rc.2: How to migrate PLATFORM_DIRECTIVES

这篇关于Angular 2 RC1-自动将所有使用过的组件导入基本组件内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！