Angular 2 не отображает пользовательские теги в шаблоне HTML

У меня странное поведение с Angular 2. На самом деле мое приложение довольно простое. У него есть компонент главной страницы под названием kys-app. В этом случае я указываю шаблон HTML как kys-app.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 -->

Примечание: чтобы упростить, я временно удалил компоненты заголовка и бокового меню. Итак, когда я захожу на главную страницу, я ожидаю увидеть основное содержимое в разделе router-outlet, а под ним - содержимое нижнего колонтитула.

Я вижу следующее: хотя основное содержимое (содержимое компонента, к которому я обращаюсь через путь маршрутизатора (например, /#/login)) отображается правильно, но другие разделы kys-app не отображаются (например, содержимое нижнего колонтитула). Другими словами, Angular 2 не отображает пользовательские теги, определенные в kys-app (например: <kys-footer>).

Может ли кто-нибудь взглянуть на приведенные выше коды и сказать мне, что я делаю не так?


angular custom-tag
person Yilmaz    schedule 01.08.2017    source источник
comment
Раньше, когда у меня была такая проблема, добавление схем: [CUSTOM_ELEMENTS_SCHEMA] решало проблему. Но на этот раз это не имело никакого значения. Кроме того, я также пробовал использовать объявления: [FooterComp] вместо директив, тоже не сработало.   -  person Yilmaz    schedule 01.08.2017
comment
А вот и мой footer.ts, на случай, если вы тоже захотите его увидеть: импортируйте {Component, CUSTOM_ELEMENTS_SCHEMA} из '@ angular / core'; @Component ({selector: 'kys-footer', templateUrl: '/app/components/app/footer.html', schemas: [CUSTOM_ELEMENTS_SCHEMA]}) экспортный класс FooterComp {constructor () {console.log ('%% FooterComp %% '); }}   -  person Yilmaz    schedule 01.08.2017

Ответы (1)


arrow_upward
3
arrow_downward

imports: [] нужно перейти к @NgModule(), он недействителен в @Component(), то же самое с directives: [ FooterComp ],, которое должно быть

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

Кажется, вы каким-то образом смешиваете финальный стиль до 2.0.0 с финальным стилем поста 2.0.0. Пожалуйста, проверьте документацию на angular.io для получения более подробной информации о том, как создавать компоненты и модули.

person Günter Zöchbauer    schedule 01.08.2017
comment
Спасибо, Гюнтер, вот и все. Это решило мою проблему. Иногда нужно посмотреть с другой стороны :) Большое спасибо. - person Yilmaz; 01.08.2017
comment
Рад слышать :) - person Günter Zöchbauer; 01.08.2017
comment
Чтобы прояснить решение, позвольте мне объяснить, как оно было решено: как указал Гюнтер, я удалил импорт и директивы из компонента kys-app. app.module.ts уже имел импорт, и я добавил FooterComp в раздел объявлений app.module.ts, и это сработало. - person Yilmaz; 01.08.2017