Angular 2不会在模板中呈现自定义标签html

我有一个奇怪的行为与角度2. 其实，我的应用程序是非常简单的。它有一个名为kys-app的主页面组件。在那里，我将模板html指定为kys-app.html。 html也很简单。它有四个部分，标题，侧菜单，页脚和主要内容。页眉，页脚和sidemenu有他们自己的模板htmls，这些模板是在他们自己的组件文件中定义的。（header.ts，footer.ts和sidemenu.ts）。主要内容预计将显示在router-outlet中。这里是KYS-app.ts：Angular 2不会在模板中呈现自定义标签html

  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 -->

注：为了简化它，暂时我删除页眉和sidemenu组件目前。因此，当我访问主页面时，我期望看到router-outlet部分中的主要内容以及它下面的页脚内容。

我所看到的是：虽然主要内容（我通过路由器路径访问的组件的内容（例如：/＃/ login））正确显示，但其他部分的kys-app不是被显示（例如页脚内容）。换句话说，angular 2不会呈现在kys-app（例如：）中定义的自定义标签。任何人都可以看看上面的代码，并告诉我我可能做错了什么？提前感谢和问候

来源

2017-08-01 Yilmaz

以前，当我遇到这种问题时，添加模式：[CUSTOM_ELEMENTS_SCHEMA]已经解决了这个问题。但是这次它没有任何区别。另外，我还尝试使用声明：[FooterComp]而不是指令，它也不起作用。 – Yilmaz

这里是我的footer.ts，以防你可能想看到它：\t \t \t \t import @ Component/CUSTOM_ELEMENTS_SCHEMA} from @ angular/core'; \t \t \t \t @Component（{ \t \t \t \t \t选择： 'KYS尺'， \t \t \t \t \t templateUrl：“/应用/组件/应用程序/页脚。HTML”， \t \t \t \t \t模式：[CUSTOM_ELEMENTS_SCHEMA] \t \t \t \t}） \t \t \t \t出口类FooterComp { \t \t \t \t构造（）{ \t \t \t \t \t \t的console.log （'%% FooterComp %%'）; \t \t \t \t \t \t \t \t \t \t \t \t} \t \t \t \t \t} – Yilmaz

imports: []需要去@NgModule()，它是无效的@Component() 同样与directives: [ FooterComp ],，这应该是

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

你似乎以某种方式混合2.0.0最终以预发布2.0.0最终样式。请查阅angular.io上的文档以获取更多详细信息，了解如何创建组件和模块。

来源

2017-08-01 07:18:24

感谢冈特，仅此而已。它解决了我的问题。有时候，需要从不同角度看待:)非常感谢。 – Yilmaz

很高兴听到:) –

为了阐明解决方案，让我解释它是如何解决的：正如Günter指出的那样，我从kys-app组件中删除了导入和指令。 app.module.ts已经有了导入，并且我在app.module.ts的声明部分添加了FooterComp，并且它工作正常。 – Yilmaz

Angular 2不会在模板中呈现自定义标签html

回答

相关问题