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

时间:2018-01-04 11:05:11

标签: angular ionic-framework ionic2

我正在尝试将我的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 个答案:

答案 0 :(得分:4)

确切地说组件用于什么。使用要作为组件模板重复使用的HTML代码段,并为该组件提供描述性的选择器。然后你就可以重新使用了它!

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

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