Question

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

目前的结构是：

pageComponent（带标签的页面的常规设置）
tabPageComponent（代表单个标签页）
构建真实标签页内容的几个组件

只使用pageComponent没问题。

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

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

模板解析错误：嵌入式模板上的组件

我的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”的指令。

此名称对我创建的组件非常具有描述性，但“模板”也是html标记的名称，有关说明和用法示例，请参阅http://www.html.am/tags/html-template-tag.cfm。

Answer 2

这是可怕的错误消息。

如果您将@Component而不是<ng-template>应用于@Directive，则会发生这种情况。

在使用Angular Material Portals并尝试创建自定义指令时遇到此错误。

是的，将指令放在<ng-template>上是有效的，如此处所示。

https://material.angular.io/cdk/portal/overview

Answer 3

对我来说，这是因为我没有将组件导入主模块并在＆＃34;声明＆＃34;中引用它。

模板解析错误：嵌入式模板上的组件

3 个答案: