Angular 在页脚外渲染按钮 router-outlet

Question

我的 index.html 有一个带有导航栏的 header，一个带有 router-outlet 的 div 容器和一个页脚。组件模板在 router-outlet 中呈现，但我还想将按钮（返回、保存、其他按钮）呈现到组件的页脚中。我该怎么做？

Answer 1

查看 Alex Rickabaugh（angular 核心）所做的演示文稿，其中介绍了如何创建内容由路由组件指定的左侧导航组件。

Advanced Angular Concepts by Alex Rickabaugh

实施此解决方案后，您可以像这样使用它：

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
  <left-nav></left-nav>
  <router-outlet></router-outlet>`,
})
export class AppComponent  {}

一些-routed.component.ts

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

@Component({
  template: `
<h2>I am Route A</h2>

<div *leftNav>
  <h3>Route A Nav</h3>
</div>
`
})
export class SomeComponent {}

您可以在此 Live demo

中检查整个实施

Angular 在页脚外渲染按钮 router-outlet

Angular render buttons in footer outside router-outlet

router

angular