如何在angular6中添加默认布局？答案

【问题标题】：How to add default layouts in angular6?如何在angular6中添加默认布局？
【发布时间】：2019-06-15 07:53:27
【问题描述】：

大家好 我想添加默认布局作为我所有角度组件的主要布局，

例如。主页面布局和登录页面布局。如果可以做到这一点？如果没有，处理这个问题的最佳方法是什么？

【问题讨论】：

标签： angular

【解决方案1】：

这可以通过至少两种方式实现：

通过实现路由并在组件的模板中添加<router-outlet></router-outlet>，该组件包含默认布局https://angular.io/guide/router
通过使用<ng-content></ng-content> angular 2 access ng-content within component 在包含默认布局的组件上使用内容投影

祝你好运！

【讨论】：

很好，但是请您提供一个完整的例子吗？
我提供了带有示例的官方文档的链接和一个堆栈溢出线程，该线程用示例解释了这两种情况。这应该可以帮助您入门。如果您在实施时遇到问题，请展示您的实施，以便我们进一步帮助您

【解决方案2】：

您可以通过定义<layout> 组件（将使用<ng-content>）来做到这一点，所有组件都将以这种方式使用它

一些组件模板：

<layout>
    <div> Some component content... </div>
</layout>

布局组件模板可以看起来像这样一个非常简单的示例（您需要将其添加到 app.module.ts 中，就像任何其他组件一样）：

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

@Component({
    selector: 'layout',
    providers: [],
    styleUrls: [ './layout.component.css' ],
    templateUrl: './layout.component.html'
})

export class LayoutComponent implements OnInit
{    
    
    constructor()
    {}

    public ngOnInit()
    {        
        
    }
}

.layout {}
.layout-head {}
.layout-body{}
.layout-footer{}

<div class="layout">
    <div class="layout-head"></div>
    <div class="layout-body">
        <ng-content></ng-content>
    </div>
    <div class="layout-footer"></div>
</div>

【讨论】：

如何添加这个？
@AhmedSakr 我更新了答案（将布局组件创建为常规组件）
你能提供一个完整的例子吗？
你的回答很好，和我一起工作..但你认为将样式和脚本从组件传递到布局组件的最佳方法..
@AhmedSakr 布局组件使用这意味着将自动包含 here 标记之间的任何内容（组件）进入布局（你不需要手动做）。所以在 sn-p 上面有一些代码（模板）以及其他组件中的使用布局示例。