Я пытаюсь повторно использовать свой HTML-заголовок для других страниц в приложении Ionic 4.

Мой код выглядит следующим образом. У меня есть:

Header.html

<ion-view>
<ion-grid>
        <ion-row>
            <ion-col col-6 class="font">
                <ion-avatar item-start>
                <img src="../../assets/imgs/ppc_logo.svg">
                </ion-avatar>
            </ion-col> 
            <ion-col col-6 class="header_font">
            <p>BUILDER'S APP</p>
            </ion-col>  
        </ion-row>
</ion-grid>
</ion-view>  

Home.html

<ion-view>
 <ion-content>
  <header> </header>
 </ion-content>
</ion-view>

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

Пожалуйста помогите

1
skydev 4 Янв 2018 в 14:05

1 ответ

Лучший ответ

Именно для этого используются компоненты . Используйте фрагмент HTML, который вы хотите повторно использовать в качестве шаблона компонента, и дайте компоненту описательный селектор . Тогда вы готовы к повторному использованию!

@Component({
  selector: 'my-reusable-component',
  template: `<div>template goes here </div>`
})
export class ReusableComponent { }

Вы можете узнать больше о компонентах Angular в официальной документации.

4
Lazar Ljubenović 4 Янв 2018 в 11:07