0

Tenho dois elementos estáticos no projeto, que nunca vão sumir, somente o conteúdo, esses são o menu do topo e uma sidenav, apartir da rota quero inserir componentes dentro do <mat-sidenav-content></mat-sidenav-content> conforme vou navegando, a principío é simples, mas é de outro componente, então seria inserir componentes dentro do template.

   <!-- sidenav.component.html -->

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <a>teste</a>
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- componentes aqui -->
  </mat-sidenav-content>
</mat-sidenav-container>


<!-- top-menu.component.html -->

<mat-toolbar color="primary">
  <p>works</p>
</mat-toolbar>

<!-- index.component.html -->
<app-top-menu></app-top-menu>
<app-sidenav></app-sidenav>

<p>index component</p>

No app.component.html só tenho <router-outlet></router-outlet>, então a ideia é que toda vez que um usuário acessar o app, caia no login e depois carregue essa sidenav e qualquer outro component dentro do mat-sidenav-content

Teoricamente eu faria isso em um component, adicionaria os templates e o conteúdo iria no local correto, porem, ele fica abaixo do sidenav:

Segue imagens: inserir a descrição da imagem aqui

Component index inserido abaixo do template: inserir a descrição da imagem aqui

Como deveria ser:

inserir a descrição da imagem aqui

1 Resposta 1

0

Para que o <mat-sidenav> funcione corretamente é necessário projetar todo o conteúdo do app dentro da tag <mat-sidenav-content>. Para colocar um componente dentro do outro utilize a tag <ng-content>. Ela funciona como um slot para que você possa inserir tags/conteúdo dentro do seu componente angular.

<!-- sidenav.component.html -->
<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <a>teste</a>
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- componentes aqui -->
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Com isso, agora é possível colocar o componente <app-top-menu> dentro do componente <app-sidenav>:

<!-- index.component.html -->
<app-top-menu>
  <app-sidenav></app-sidenav>
</app-top-menu>

Referências:

1
  • 1
    Com alguns ajustes, isso é realmente o que eu queria, o que eu mudei é que <app-top-menu> fica isolado acima e o ng-content vai dentro do content da sidenav, com isso, o conteúdo eu coloco dentro da tag da sidenav e funciona perfeitamente, obrigado, você me ajudou a finalizar =D 18/02/2019 às 22:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .