Размещение пользовательских значков в заголовке страницы - PullRequest
Новая
       14

Размещение пользовательских значков в заголовке страницы

0 голосов
/ 08 марта 2019

База моего проекта ngx-rocket .

Там заголовок страницы - это собственный компонент с кнопками для навигации по страницам контента (дома, в сети и т. Д.)и раскрывающееся меню.

Я хотел бы добавить кнопку в заголовок страницы для пользовательского компонента страницы содержимого.

Но я не знаю, как.

Я имею в виду, я мог бы добавить кнопку в header.component.html , но это кажется неправильным, потому что это повлияет на все страницы контента (и как бы я управлял взаимодействием компонентов при нажатии кнопки?).

Какая обычная практика для этого?

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Вероятно, вы хотите использовать <ng-content></ng-content> внутри вашего header.component.html и на страницах с содержанием вы можете написать что-то вроде этого: 

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

Таким образом, вы можете запросить его и отобразить в DOM в своем header.component.ts (вам нужно знать, что такое ContentChild и ViewChild В чем разница между @ViewChild и @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)
}
...

Надеюсь, это поможет:)

0 голосов
/ 10 марта 2019

Я использую CdkPortal сейчас, что делает именно то, что я хочу и нуждаюсь.

С помощью этого учебного пособия и этого примера я смог поместить кнопку в своем заголовке, не меняя структуру проекта.

...