路由器出口外页脚中的角度渲染按钮答案

【问题标题】：Angular render buttons in footer outside router-outlet路由器出口外页脚中的角度渲染按钮
【发布时间】：2018-09-27 21:39:14
【问题描述】：

我的 index.html 有一个带有导航栏的标题、一个带有路由器插座的 div 容器和一个页脚。组件模板在路由器插座中呈现，但我还想将按钮（后退、保存、其他按钮）呈现到组件的页脚中。我该怎么做？

【问题讨论】：

显示一些代码。如果你创建一个 plunker 会更好

标签： angular router

【解决方案1】：

查看 Alex Rickabaugh（角度核心）所做的演示，关于创建一个左导航组件，其内容由路由组件决定。

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  {}

some-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 中检查整个实现

【讨论】：

终于试了一下，效果很好。但是我只能让它在一个模块中工作。我需要指令（在您的示例中为 *leftNav）显示在主模块中，并从子模块中的组件提供内容。
为了解决它在不同模块中不起作用的问题，在一个公共模块中包含对指令和服务的引用。这行得通！
@Mcanic 嗨，我也试图从一个公共模块共享该指令，然后在应用程序模块和库模块中使用它，但总是得到“我的指令”不是已知的元素。你是怎么做到的？