Question

我对Angular 2有一种奇怪的行为。实际上，我的申请非常简单。它有一个名为kys-app的主页面组件。在那，我将模板HTML指定为kys-app.html。 HTML也很简单。它有四个部分：标题，侧面菜单，页脚和主要内容。页眉，页脚和侧边菜单都有自己的模板HTML，这些HTML在自己的组件文件中定义。（header.ts，footer.ts和sidemenu.ts）。预计主要内容将显示在路由器插座中。这是kys-app.ts：

            import { Component, OnInit, Input, Injectable, Inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
            import { Router, RouterModule }         from '@angular/router';
            import { FormsModule }                  from '@angular/forms';
            import { HttpModule, XHRBackend }       from '@angular/http';

            //import { HeaderComp }      from '../../components/app/header';
            import { FooterComp }        from '../../components/app/footer';
            //import { SideMenuComp }    from '../../components/app/side-menu';
            //import { AuthGuard }       from '/app/services/auth-guard';

            @Component({
                imports: [ HttpModule, RouterModule ],
                selector: 'kys-app',
                templateUrl: '/app/components/app/kys-app.html',
                directives: [ FooterComp ], 
                schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
               // providers: [ {provide: Router, useClass: RouterModule} ]
            })

            export class KYSAppComp {

                 constructor() {
                     console.log(' %% KYSAppComp %%');

                 }
            }

我的kys-app.html内容如下：

            <!-- Main Content -->
                <section class="content-wrap">
                    <div class="card-panel">

                  <router-outlet></router-outlet>

                <!--   Footer -->
                <kys-footer></kys-footer>
                    </div>

                </section>
                <!-- /Main Content -->

注意：为了简化它，我暂时删除了header和sidemenu组件。所以，当我访问主页面时，我希望看到路由器出口部分的主要内容，下面是页脚内容。

我所看到的是：虽然主要内容（我通过路由器路径访问的组件的内容（例如：/#/login））正确显示但kys-app的其他部分没有显示（例如页脚内容）。换句话说，Angular 2不会呈现kys-app中定义的自定义标记（例如：<kys-footer>）。

有人可以查看上面的代码并告诉我可能做错了吗？

Answer 1

imports: []需要转到@NgModule()，在@Component()中无效与directives: [ FooterComp ],相同，应为

 @NgModule({ 
   imports: [ HttpModule, RouterModule ],
   declarations: [ FooterComp ],

你似乎以某种方式混合了2.0.0决赛和2.0.0后的最终风格。有关如何创建组件和模块的更多详细信息，请查看angular.io上的文档。

Angular 2不会在模板HTML中呈现自定义标记

1 个答案: