Угловые шаблоны не загружаются, но выходы - PullRequest
Новая
       7

Угловые шаблоны не загружаются, но выходы

0 голосов
/ 30 декабря 2018

Мои шаблоны выходят нормально в браузере, но компонент HTML-шаблон не загружается.Компоненты создаются с помощью CLI.не уверен, что здесь не так.[да, я просматривал шаблоны вопросов здесь на SO в течение нескольких часов.]

Вот то, что отображает браузер.

enter image description here

Здесьмой main.layout.component.html 

Test
<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

Это мой шаблон заголовка и компонент, например.(нижний колонтитул похож.)

Шаблон 

<p>
  header works!
</p>

Компонент 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Здесь находится модуль макета, который объявляет все компоненты. 

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
    ],
    exports: [
    ],
    declarations: [
        AuthLayoutComponent,
        MainLayoutComponent,
        EmptyLayoutComponent,
        HeaderComponent,
        FooterComponent
    ]
})
export class AppLayoutModule { }

Вот структура.Я не получаю никаких ошибок консоли и т. Д. Спасибо за любую помощь.enter image description here

ОБНОВЛЕНИЕ:

Если я добавлю HeaderComponent в объявления AppModule, шаблон заголовка загружается!Я делаю что-то не так с моей структурой?Почему мне нужно объявить компоненты дочернего модуля (LayoutModule) в вышестоящих модулях (AppModule) для его работы?

Ответы [ 2 ]

0 голосов
/ 01 января 2019

после прогулки я разобрался в проблеме.Я не экспортировал компоненты;поэтому родительский модуль не смог найти шаблоны компонентов.Вот правильный AppLayoutModule 

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
    ],
    exports: [
        HeaderComponent,
        AuthLayoutComponent,
        MainLayoutComponent,
        EmptyLayoutComponent,
    ],
    declarations: [
        HeaderComponent,
        AuthLayoutComponent,
        MainLayoutComponent,
        EmptyLayoutComponent,
        FooterComponent,
    ]
})
export class AppLayoutModule { }
0 голосов
/ 31 декабря 2018

Должен быть только один <router-outlet> для углового применения.Причина <router-outlet> визуализация компонентов по заданному маршруту.

...