Question

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

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

Answer 1

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

通过实现路由并在包含默认布局https://community.tealiumiq.com/t5/iQ-Tag-Management/Tracking-Video-with-Tealium-iQ/ta-p/15049]的组件模板内包含<router-outlet></router-outlet>
通过使用<ng-content></ng-content> https://angular.io/guide/router在具有默认布局的组件上使用内容投影

祝你好运！

Answer 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>

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

2 个答案: