Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.a content projection

If you learned Angular JS before switching to Angular, you might be familiarized with the term transclusion. Por outro lado, se você não tem idéia do que é transclusão, o novo nome para ele em Angular é projeção de Conteúdo, e isso é o que vamos cobrir neste post.

projeção de conteúdo consiste em passar uma porção da árvore DOM de um componente pai para um componente filho.

é perfeito para compilar componentes reutilizáveis, tais como janelas, modais, páginas, e afins.

Aqui está um exemplo onde eu quero criar uma janela pop-up com o conteúdo personalizável, e eu gostaria de “passar” o conteúdo para o pop-up da seguinte forma:

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

Note que eu também estou passando um título como uma entrada para esse componente. Agora, por padrão, o código acima não projetaria o conteúdo. A fim de fazer a projeção de conteúdo acontecer, precisamos adicionar a diretiva de conteúdo ng em algum lugar no modelo do componente criança:

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-content works very much like router-outlet: É uma directiva que indica onde o conteúdo dinâmico vai ser carregado.

outra forma de envolver a sua cabeça em torno da projeção de conteúdo é que ele está basicamente indo para “cortar e colar” o HTML gerado a partir do componente pai para o modelo HTML do componente criança e que HTML vai ser “colado” onde o ng-content está localizado.

Uma vez que tenhamos o código acima no lugar, o pop-up torna-se o seguinte::

Você pode encontrar o código completo para o exemplo neste Stackblitz:

isto Pode projetada de conteúdo ser dinâmico?claro que pode! Você pode usar qualquer encadeamento de dados, diretrizes, ou até mesmo outros componentes, se quiser.

Aqui está um exemplo:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

e tudo isto funciona perfeitamente:

O código completo para este segundo exemplo pode ser encontrado neste Stackblitz:

e se eu quiser projecto várias coisas em lugares diferentes?ainda bem que perguntaste. Isto é chamado de projeção de conteúdo multi-ranhuras.

vamos assumir que queremos mudar a nossa janela pop-up para que possamos passar um corpo personalizado, bem como um rodapé personalizado para ele.

Vamos usar dois ng-conteúdo de directivas no componente, e a chave é fazer com que os dois slots de selecionar uma parte específica da projetada de conteúdo usando a seguinte sintaxe:

<div class="modalW-body">
<ng-content select="body"></ng-content>
</div><div class="modalW-footer">
<ng-content select="footer"></ng-content>
</div>

Agora, a fim de passar o conteúdo para estes slots específicos, tudo o que eu tenho a fazer é usar tags que correspondem a critérios de selecção previstos acima:

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

Note que eu usei corpo e rodapé, porque eles são os elementos HTML que só fazem sentido no contexto. No entanto, você pode selecionar elementos pela classe CSS, nome do atributo, ou qualquer coisa que você gosta. Não é preciso fazê-lo exactamente como eu fiz aqui.

Como você pode ver, ele funciona muito bem:

apliquei uma cor diferente para o rodapé portanto, podemos ver que o conteúdo foi transcluída em direito slot

O código completo para este último exemplo pode ser encontrado neste Stackblitz:

Meu nome é Alain Chautard. Eu sou um especialista em desenvolvimento do Google em Angular, bem como consultor fundador e treinador em treinamento Angular, onde eu ajudo as equipes de desenvolvimento a aprender e tornar-se proficiente com Angular.precisa de ajuda com o Angular? Vamos marcar um tempo para conversar.se gostou deste post, por favor bata palmas ou partilhe-o. A tua ajuda é sempre apreciada.

Deixe uma resposta

O seu endereço de email não será publicado.