Question

我将@Input添加到我的Angular 2指令中，我收到错误，导致我认为我没有导入包含@Input元数据的Angular 2模块。

zone.js:1263 GET http://localhost:8880/vendor/@angular/core/bundles/core.umd.js/src/metadata/directives.js 404 (Not Found)

证明这一点是当我删除@Input元数据时，应用程序不会产生任何错误。

在我使用@Input元数据的模块中，我从{Input}导入@angular/core/src/metadata/directives我的IDE（IDEA 2016.2）自动为我添加了参考。

所以我需要通过@NgModule导入适当的Angular 2模块 - 但是我不知道如何确定它的名称或位置。

这是我的ApplicationModule（引导程序）模块定义：

import {NgModule} from '@angular/core';

import {BrowserModule, Title} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';

import {UtilityModule} from '../utility/module';
import {I18NModule} from '../i18n/module';

import {FrameworkModule} from '../framework/module';

import {ApplicationComponent} from './application.component';
import {applicationRouting, applicationRoutingProviders} from './application.routing';

import {SandboxComponent} from './sandbox.screen/sandbox.component';
import {SpreadsheetComponent} from './spreadsheet.screen/spreadsheet.component';

@NgModule({
    imports: [BrowserModule, RouterModule, UtilityModule, I18NModule, applicationRouting, FrameworkModule],
    providers: [Title, applicationRoutingProviders],
    declarations: [ApplicationComponent, SandboxComponent, SpreadsheetComponent],
    bootstrap: [ApplicationComponent]
})
export class ApplicationModule {}

这是我的FrameworkModule，我尝试使用@Input：

import {NgModule} from '@angular/core';

import {BrowserModule} from '@angular/platform-browser';

import {TUT_FRAMEWORK_DIRECTIVES} from './directives/index';
import {TUT_FRAMEWORK_COMPONENTS} from './components/index';

@NgModule({
    imports: [BrowserModule],
    providers: [],
    declarations: [TUT_FRAMEWORK_DIRECTIVES, TUT_FRAMEWORK_COMPONENTS],
    exports: [TUT_FRAMEWORK_DIRECTIVES, TUT_FRAMEWORK_COMPONENTS]
})
export class FrameworkModule {}

据推测，我需要在其中一个文件中添加一个Angular 2模块导入，以提供@Input的实现

一般来说，Angular 2提供的模块列表在哪里？如何确定哪些模块对应于Angular 2的哪些功能？

进一步研究

来自Angular网站（API文档）：

https://angular.io/docs/ts/latest/api/

@角/芯

Input

https://angular.io/docs/ts/latest/api/core/index/Input-interface.html

从 @ angular / core / index 导出，在 @ angular / core / src / metadata / directives.ts

中定义

我不确定如何解释上述任何有关我需要包含在引导程序模块定义中的信息...（也许我正在咆哮错误的树）

Answer 1

要在您的组件中使用@Input()，您必须从核心包中导入Input，如下所示 -

import { Input } from '@angular/core';

参考：https://angular.io/docs/ts/latest/cookbook/component-communication.html

看看这是否有帮助。

Answer 2

我发现了我的问题：

在我的指令中，我的IDE通过它的完整路径帮助导入了Input：

import {Input} from '@angular/core/src/metadata/directives';

Angular 2的发布版本提供了捆绑包，在我的system.config.js文件中，我在这个片段中引用了这些：

System.config(
    {
        paths: {
            // paths serve as alias
            'npm:': 'vendor/'
        },
        // tell the SystemJS loader where to look for packages and components
        map: {
            'application': '.',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

...

因为我的导入包含Input的扩展路径，系统加载程序将其附加到我的System.config map:条目中的引用...导致加载Angular 2核心模块(404)的错误路径：

zone.js:1263 GET http://localhost:8880/vendor/@angular/core/bundles/core.umd.js/src/metadata/directives.js 404 (Not Found)

请注意/src/metadata/directives.js捆绑引用附加core.umd.js ...

要解决我的问题，我需要做的就是引用core模块而不是typings文件，其中export为Input被声明（如下所示））：

import {Input} from '@angular/core';

我的应用程序需要哪些Angular 2模块？

2 个答案: