模块“AppModule”声明的意外模块“PublicModule”。 Angular4 组件结构答案

【问题标题】：Unexpected module 'PublicModule' declared by the module 'AppModule'. Angular4 Component Structure模块“AppModule”声明的意外模块“PublicModule”。 Angular4 组件结构
【发布时间】：2018-11-10 22:03:19
【问题描述】：

我正在尝试实现一个简单的结构，

app
--_layout
  --public-footer
  ----public-footer.html/ts/css files
  --public-header
  ----public-header.html/ts/css files
  --public-layout
  ----public-layout.html/ts/css files

在 public-layout.html 内：

<public-header></public-header>
<router-outlet></router-outlet>
<public-footer></public-footer>

在 public-layout.ts 内：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-public-layout',
  templateUrl: './public-layout.component.html',
  styleUrls: ['./public-layout.component.css']
})
export class PublicLayoutComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

现在，这个公共布局将用于其他组件，如 Home、About 等。

关于事情对我来说不太成功，尝试了不同的组合，但没有一个对我有用。

我希望我不应该在 app.module 中声明/导入页眉、页脚。

你们能帮帮我吗？

【问题讨论】：

我删除了整个布局并尝试了另一种组合。现在我想我迷路了。
他当前的布局行为是什么，期望的行为是什么？
我看的和上面一模一样，要求很简单，需要两个布局 public 和 private 并且布局的页眉和页脚会有所不同，上面的示例仅演示公共布局。我将在 Home/About 中使用这个公共布局组件
我在这几个小时内对它进行了一定程度的修改。我的问题很简单，如果我只想在布局中使用组件，我应该在 App.Module 中提到这一点，还是在 diff 中需要 NgModules。层次结构
仅供参考，我指的是stackblitz.com/edit/…。唯一的区别是我只是不想在 App.Module 中包含页眉页脚组件，这就是问题开始的地方。

标签： javascript angular typescript angular-components

【解决方案1】：

您好，这里有两种解决方案：

首先是在你的布局中使用<router-outlet></router-outlet> 的策略，你可以使用并在你想要你的出口的每个视图中包装组件。

<app-app-layout>
  <h1>
  Html of some component that will be inside viewed inside the layout.
  </h1>
</app-app-layout>

使用此策略，您可以根据需要拥有任意数量的布局。

第二种解决方案是使用基于树的结构进行路由，例如，对于每个布局，来自应用程序模块的您将有两个分支。一个带有所需插座的私人，您可以在其中放置<router-outlet></router-outlet>，这样它的所有孩子都将拥有插座。第二个路由分支将被称为公共（例如），这个分支将连接到所有不得有支出的组件/视图。

我推荐第一种策略，这里有一个基于你的stackblitzStackBlitz的第一个解决方案的demo@

【讨论】：

为什么推荐第一个？
因为在某些时候你可能需要第三和第四个布局，因为某些原因（比如说 UI 团队讨厌开发团队 :D），而此时包装起来会更容易需要任何布局的组件，另一件事是，如果您采用第二种策略，则所有链接都将具有前缀 /private/... 或“/public/....”，具体取决于布局，这可能不是最好的用户体验。