Question

我正在努力实现一个简单的结构，

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中声明/ import header，footer。

你们可以帮助我吗？

Answer 1

您好以下是针对您的案例的两种解决方案：

首先，在您的布局中使用带有<router-outlet></router-outlet>的策略，您可以在每个视图中使用并在每个视图中您希望您的插件包装组件。

＆＃13;

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

＆＃13;

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

第二种解决方案是用于路由基于树的结构，对于每个布局，例如从app模块，您将有两个分支。一个私人拥有所需的出口和内部，你可以<router-outlet></router-outlet>这样做，所有的孩子将有出口。第二个路由分支将被称为public（例如），这个将连接到所有组件/视图，这些组件/视图不得有支出。

我推荐第一个策略，这是基于您的stackblitz StackBlitz

的第一个解决方案的演示

意外的模块＆＃39; PublicModule＆＃39;由模块＆＃39; AppModule＆＃39;声明。 Angular4组件结构

1 个答案: