其他页面中的离子重用标头

Question

我正在尝试将我的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>

我想再次使用它作为其他页面中的指令，而不是在每个页面中复制整个代码。

请协助

Answer 1

这正是组件的用途。使用要作为组件模板重用的HTML代码段，并为组件提供描述性选择器。然后你就可以重新使用了！

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

您可以阅读更多关于Angular components in the official documentation的信息。