Question

我刚刚将我的应用程序从angular2 RC5更新为RC6，我仍然在选择器中出错

这是控制台

> Unhandled Promise rejection:
> 
> Template parse errors: 'time-filter' is not a known element:
> 1. If 'time-filter' is an Angular component, then verify that it is part of this module.
> 2. If 'time-filter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message. ("<div> [ERROR
> ->]<time-filter></time-filter>

这是我的组件代码：

@Component({
    selector: 'time-filter',
    templateUrl: '../app/shared/time-filter/time-filter.html',
    providers: [TimeService]
})

export class TimeFilter implements OnInit
{..}

以及我如何称呼它

import { Component, NgModule,SchemaMetadata } from '@angular/core';
import {TimeFilter} from '../shared/time-filter/time-filter.component';

@Component({
    template: `<div>
               <time-filter></time-filter>
        </div>
`

})
@NgModule({
        declarations: [TimeFilter]
})

Answer 1

在@Component中，添加selector并在@NgModule的声明中定义相同的组件。

像这样创建AppComponent -

import { Component } from '@angular/core';
import { TimeFilter } from '../shared/time-filter/time-filter.component';

@Component({
selector: 'my-app',
template: `<div>
           <time-filter></time-filter>
        </div>
`
})

然后在AppModule中声明这两个组件 -

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, TimeFilter]
    bootstrap: [AppComponent]
})
export class AppModule { }

另外，请勿在单个文件中混用@component和@ngmodule。 为每个文件定义一件事（例如服务或组件）。参考angular2 style guide

看看这是否有帮助。

Answer 2

另外，请注意在RC6中，对@component中的指令和管道不赞成（所以你应该将它们移到上层模块）。你可以在这里读更多关于它的内容 https://github.com/angular/angular/commit/4a740f2

将应用程序升级到Angular2 RC6

2 个答案: