angular - 模板解析错误 : Components on an embedded template

Question

我已经构建了一个 angular2 RC5 应用程序，它应该使用至少 2 级嵌套组件/指令来构建干净且可读的 html 模板。

当前结构是:

• pageComponent(带有选项卡的页面的一般设置)
• tabPageComponent(表示单个标签页)
• 构建真实标签页内容的几个组件

只需使用 pageComponent 就没有问题。

添加和使用指令来显示 tabPageComponent 也可以。

在 tabPageComponent 中添加和使用其他组件/指令会引发错误

Template parse errors: Components on an embedded template

我的 html 看起来像这样:

pageComponent.html

<p-tabView>
    <p-tabPanel header="Tab 1">
        <tab-template></tab-template> /* this references tabPageComponent */
    </p-tabPanel>
    <p-tabPanel header="Tab 2">
        Content 2
    </p-tabPanel>
</p-tabView>

tabPageComponent.html

<anotherComponent></anotherComponent>

如果我只是在 tabPageComponent.html 中使用纯 html 并且不声明任何指令，则一切都按预期工作。一旦我添加另一个自定义指令，就会发生错误。

是否可以使用嵌套指令？什么可能导致我遇到的错误？

如果需要进一步的代码来解释问题或帮助查找错误，请询问。

更新

这是我的@ngModule:

// Left out several import statements
@NgModule({
    declarations: [
        AdminAppComponent,
        TestComponent,
        OrdersComponent,
        TemplatesComponent,
        TemplateComponent,
        TemplatePageComponent,
        UsersComponent,
        UserComponent,
        StatsComponent,
        ProvidersComponent,
        ProviderComponent,
        AccessDeniedComponent,
        LoginComponent,
        // ComplexElementComponent,
        // ComplexElementListComponent,
        // BaseElementComponent,
        // BaseElementListComponent,
        WikiComponent,
        GrowlComponent
    ],
    providers: [
        LocalStorageService,
        ApicallsService,
        AuthService,
        FileUploadService,
        SettingsService,
        SystemobservablesService,
        FormBuilder,
        AdminAuthGuard
    ],
    imports: [
        BrowserModule, 
        FormsModule, 
        HttpModule,
        TabViewModule,
        //RouterModule 
        routing
    ],
    bootstrap: [AdminAppComponent],
})
export class AdminModule {
}

Answer 1

在我的例子中，解决方案相当简单:重命名组件的其中一个选择器。

从不创建名为"template"的指令。

这个名称对我创建的组件非常具有描述性，但"template"也是 html 标签的名称，请参阅 http://www.html.am/tags/html-template-tag.cfm获取描述和使用示例。