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

回答

相關問題