Question

我的模板插座在浏览器中可以很好地加载，但是组件模板html无法加载。组件是使用CLI生成的。不知道这里出了什么问题。 [是的，我在SO上浏览了模板问题几个小时。]

这是浏览器呈现的内容。

这是我的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 { }

这是结构。我没有收到任何控制台错误等。感谢您的帮助。

更新：

如果我在AppModule声明中添加HeaderComponent，则会加载标题模板！我的结构有问题吗？为什么我需要在更高的模块（AppModule）中声明子模块的（LayoutModule）组件才能工作？

Answer 1

对于角度应用，必须仅一个 <router-outlet>。使<router-outlet>通过给定的路线渲染组件。

Answer 2

散步后我发现了这个问题。我没有导出组件；因此，父模块无法找到组件模板。这是正确的AppLayoutModule

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

Angular模板不加载，但插座可以加载

2 个答案: