在页眉中放置自定义图标答案

【问题标题】：Placing custom icons in page header在页眉中放置自定义图标
【发布时间】：2019-07-30 06:58:18
【问题描述】：

我的项目库是ngx-rocket。

在那里，页眉是一个自己的组件，带有用于浏览内容页面（主页、关于等...）的按钮和一个下拉菜单。

我想为自定义内容页面组件的页面标题添加一个按钮。

但我不知道怎么做。

我的意思是，我可以将按钮添加到header.component.html，但这似乎不对，因为这会影响所有内容页面（以及如何管理按钮单击时的组件交互？）。

这样做的常见做法是什么？

【问题讨论】：

标签： angular typescript layout

【解决方案1】：

您可能想在 header.component.html 和内容页面中使用<ng-content></ng-content>，您可以这样写：

...
<app-header>
  <ul class="xy-content-page-header-menu">
    <li><a routerLink="...">Content page specific link</a></li>
    ....
  </ul>
</app-header>
...

另一方面，它允许您只使用一个可以合并到标题组件中的内容块。

如果要添加更多单独的块，则需要使用 ngTemplateOutlet (https://angular.io/api/common/NgTemplateOutlet) 或带有角度模板的 vcr.createEmbeddedView。示例 1：

<app-header [inputTemplate]="menu">
  <ng-template #menu let-element>
      <ul class="xy-content-page-header-menu">
        <li><a routerLink="...">Content page specific link {{element.data}}</a></li>
        ....
      </ul>
  </ng-template>
</app-header>

在你的 header.component.html 中：

<ng-container *ngTemplateOutlet="inputTemplate, context: { $implicit: some_data_data_for_element_object_outside }"></ng-container>

示例 2（创建自定义结构指令 (https://angular.io/guide/structural-directives)，以便您可以在 header.component.ts 中查询它，如果需要，您也可以在上一个示例中使用它）：

    <app-header>
      <ul class="xy-content-page-header-menu" *myStructuralDirective="let element">
        <li><a routerLink="...">Content page specific link {{element.data}}</a></li>
                ....
     </ul>
   </app-header>

所以你可以在你的 header.component.ts 中查询它并渲染到 DOM 中（你需要知道 ContentChild 和 ViewChild 是什么What's the difference between @ViewChild and @ContentChild?）：

@Component...{
...
@ContentChild(MyStructuralDirective) menu:MyStructuralDirective;
@ViewChild('whereTheMenuGoes', {read: ViewContainerRef}) elementVcr: ViewContainerRef;
...

someRenderFunction(){
  this.elementVcr.createEmbeddedView(menu._template, this.some_data_data_for_element_object_outside)
}
...

希望对你有帮助:)

【讨论】：

非常感谢您的快速答复。我试试看。想想我想到的是，默认情况下shell component 将标题和内容包装为兄弟姐妹......

【解决方案2】：

我现在使用CdkPortal，这正是我想要和需要的。

在tutorial 和example 的帮助下，我能够在标题中放置一个按钮，而无需更改任何项目结构。

【讨论】：