英文:
Adding other elemts into Component tag from Angular component
问题
我有一个Angular组件，HTML看起来像这样：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!Doctype HTML>
<html>
<body>
<div class="main">
<div [ngClass]="{'parent' : loading, 'parent-no-anim': !loading}">
<div class="child">
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
然后我在另一个组件中实现了这个组件，像这样：
> <app-mat-loading-card [loading]="device.loading || device.connecting">
>
> </app-mat-loading-card>
现在我想在这个标签中添加其他东西，比如一个普通的Span之类的。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<app-mat-loading-card [loading]="device.loading || device.connecting">
<span class="button-title">{{device.deviceName}}</span>
</app-mat-loading-card>
<!-- end snippet -->
我尝试在Chrome Dev Tools中查找，但在那个组件标签中没有找到任何内容。
但无论我尝试什么，什么都不显示。我在组件标签中放什么，它都消失了。如果有人能帮我解决问题，那就太好了，谢谢 :)
英文:
I have an Angular Component, the HTML looks something like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!Doctype HTML>
<html>
<body>
<div class="main">
<div [ngClass]="{'parent' : loading, 'parent-no-anim': !loading}">
<div class="child">
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
And I implement that Component in another Component like this:
> <app-mat-loading-card [loading]="device.loading || device.connecting">
>
> </app-mat-loading-card>
Now I want to add other things in this Tag aswell, like a regular Span or something.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<app-mat-loading-card [loading]="device.loading || device.connecting">
<span class="button-title">{{device.deviceName}}</span>
</app-mat-loading-card>
<!-- end snippet -->
I tried looking in Chrome Dev Tools, but I did not found anything in that Component Tag.
But whatever I try, nothing gets displayed. Whatever I put in that Component Tag, disappears. It would be kind if anyone could help me out, thanks 
答案1
得分: 1
在Angular中，无论你在组件标签之间放置什么，都会在默认情况下消失。然而，你可以在组件内部投影位于组件标签之间的内容。通常使用<ng-content>标签来处理这个。
你放置在组件标签之间的内容将会显示在ng-content标签的位置。
官方文档关于内容投影：https://angular.io/guide/content-projection
我写的一篇关于此的文章，附有示例：https://dev.to/renaisense_/angular-content-projection-and-solid-code-ng-content-5940
希望这些能帮助你找到正确的方法。
英文:
In angular, whatever you put between the component tags will disappear as default behaviour. You can however project what is between the component tags inside the component itself. This is normally handled with the <ng-content> tag.
What you put between the component tags will show up in place of the ng-content tags.
Official Docs on content projection: https://angular.io/guide/content-projection
An article I wrote about it, with examples: https://dev.to/renaisense_/angular-content-projection-and-solid-code-ng-content-5940
Hope this helps in guiding you to the right approach
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论