Question

我的项目基础是ngx-rocket。

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

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

但是我不知道如何。

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

执行此操作的常见做法是什么？

Answer 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)
}
...

希望它会有所帮助：）

Answer 2

我现在使用CdkPortal，它完全可以满足我的需求。

借助此tutorial和此example，我可以在标题中放置一个按钮，而无需更改任何项目结构。

在页面标题中放置自定义图标

2 个答案: