Angular 19 Multiple content placeholders - Stack Overflow

admin管理员组

文章数量:1415491

Angular 19 describes support for projecting multiple different elements into different <ng-content> placeholders based on 'CSS selector.' I am specifically looking at their 'Multiple content placeholders' section on this page of their angular.dev website. /guide/components/content-projection

They indicate that you can define a placeholder like so: <ng-content select="card-title"> and project content into like so:

<custom-card>
    <card-title>Hello</card-title>
</custom-card>

However, when I try this on my own, I get "NG8001 'card-title' is not a known element." To me it seems I need to define a custom element by making a new card-title component, but the tutorial doesn't mention needing to do that. Maybe I'm misunderstanding, but I feel like the card-title element should just 'work.'

Is it the case that I still need to define my own card-title component?

I know that in order to get around this I can use a attributes to aid content projection:

 <!-- Component template -->
<div class="card-shadow">
  <ng-content select="[card-title]"></ng-content>
  <div class="card-divider"></div>
  <ng-content select="[card-body]"></ng-content>
</div>

<!-- Using the component -->
<custom-card>
  <div card-title>Hello</div>
  <div card-body>Welcome to the example</div>
</custom-card>

(using the second option works fine and dandy) But I'm curious what I'm doing wrong in following their example? Why do I get a "NG8001 'card-title' is not a known element." error when the tutorial implies that I don't need to define new card-title and card-body components.

本文标签： Angular 19 Multiple content placeholdersStack Overflow