Skip to main content
Post restaurado por Gonzaga Neto
correção ortografica de comando.
Fonte Link

Neste caso a1 - A solução adotadautilizada foi criar uma novaa criação de um componente footercustom padronizado que pode ser utilizado em qualquer página comdesejada, para isso utilizando o ionic cli criei o componente:

Comando: ionic g component footercustom

2 - Depois dos arquivos gerados inseri o código html do footer no arquivo footercustom.html

Após isso insira no decorador3 @NgModule() da página associada- Para permitir a referenciautilização das tags do footer conforme abaixo, em nosso exemplo declaramosionic no arquivo principalcódigo html foi necessário importar no decorator o módulo IonicPageModule. (component.module.ts:)

@NgModule({
    declarations: [[FootercustomComponent],
    PrincipalPageimports: [IonicPageModule],
    FooterPageexports: [FootercustomComponent]
})
export class ],ComponentsModule {}

Por fim,4 - Dentro do módulo da pagina que iria utilizar o footer foi necessário chamar o seletora importação do footer (<page-footer></page-footer>) no html das páginas onde o rodapé deve ser rederizado.módulo do componente:

@NgModule({
  declarations: [
    PrincipalPage
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(PrincipalPage),
  ],
})
export class PrincipalPageModule {}

Neste caso a solução adotada foi criar uma nova página com o html do footer.

Após isso insira no decorador @NgModule() da página associada a referencia do footer conforme abaixo, em nosso exemplo declaramos no arquivo principal.module.ts:

@NgModule({
  declarations: [
    PrincipalPage,
    FooterPage
  ],

Por fim, foi necessário chamar o seletor do footer (<page-footer></page-footer>) no html das páginas onde o rodapé deve ser rederizado.

1 - A solução utilizada foi a criação de um componente footercustom padronizado que pode ser utilizado em qualquer página desejada, para isso utilizando o ionic cli criei o componente:

Comando: ionic g component footercustom

2 - Depois dos arquivos gerados inseri o código html do footer no arquivo footercustom.html

3 - Para permitir a utilização das tags do ionic no código html foi necessário importar no decorator o módulo IonicPageModule. (component.module.ts)

@NgModule({
    declarations: [FootercustomComponent],
    imports: [IonicPageModule],
    exports: [FootercustomComponent]
})
export class ComponentsModule {}

4 - Dentro do módulo da pagina que iria utilizar o footer foi necessário a importação do módulo do componente:

@NgModule({
  declarations: [
    PrincipalPage
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(PrincipalPage),
  ],
})
export class PrincipalPageModule {}
Post removido por Gonzaga Neto
Fonte Link

Neste caso a solução adotada foi criar uma nova página com o html do footer.

Após isso insira no decorador @NgModule() da página associada a referencia do footer conforme abaixo, em nosso exemplo declaramos no arquivo principal.module.ts:

@NgModule({
  declarations: [
    PrincipalPage,
    FooterPage
  ],

Por fim, foi necessário chamar o seletor do footer (<page-footer></page-footer>) no html das páginas onde o rodapé deve ser rederizado.