У меня есть созданная мной панель инструментов и другие компоненты. В app.component у меня что-то вроде этого:

<app-toolbar>
</app-toolbar>

<main>
    <a [routerLink]="['/login/en']"></a>
    <router-outlet></router-outlet>
</main>

Я хотел бы использовать «position = sticky», чтобы панель инструментов всегда была вверху во время прокрутки, но я не могу ее использовать, потому что у меня нет панели инструментов для каждого компонента. Я использую Angular 5. Есть простой способ? Спасибо.

0
gio 16 Фев 2021 в 20:36

1 ответ

Лучший ответ

Вы можете создать «шаблонный компонент», который содержит панель инструментов + <ng-content>.

В этом примере мы предполагаем, что вы создали шаблон с таким селектором, как <app-toolbar-template>

toolbar-template.ts

@Component({
  selector: 'app-toolbar-template',
  templateUrl: './toolbar-template.html',
  styleUrls: ['./toolbar-template.css']
})
export class ToolbarTemplateComponent {}

toolbar-template.html

<div id="toolbar">Fake toolbar</div>

<ng-content></ng-content>

Затем, когда вы создаете компонент:

  • Если вам нужна панель инструментов, поместите ее содержимое в тег <app-toolbar-template>.
  • Если вам не нужна панель инструментов, просто разместите свой контент.
  • CSS для управления панелью инструментов будет написан на toolbar-template.css

< Сильный > foo.component.html

<!-- With the toolbar -->
<app-toolbar-template>
  <div>Content</div>
</app-toolbar-template>

OR just 

<!-- Without the toolbar -->
<div>Content</div>

Рабочая демонстрация здесь

0
Arnaud Denoyelle 16 Фев 2021 в 17:56