Question

很抱歉，如果我的语言不对，我不是一个有角的人；当您甚至不知道要尝试执行的操作是什么时，很难用Google搜索答案。

我正在尝试创建一个上下文相关的帮助模式，作为具有文本标题和HTML内容的组件。

我的想法是，我将在模板中（无论何时需要上下文相关帮助）都包含一个选择器，例如：

<context-help [title]="'This Particular Feature'">
    <div class="something">
      <h3>Some Subheading</h3>
      <p>My description/ content goes here!</p></div>
</context-help>

我希望将其呈现在组件模板中，如下所示：

<div class="icon icon-help icon-clickable" (click)="onHelpClick()"></div>

...然后在我的component.ts中，我将有逻辑来显示带有标题的模态，标题带有内部的HTML内容。

title似乎很容易创建：

@Input() title:string;

...但是我不清楚如何收集HTML内容。这样做的机制是什么？

Answer 1

在模式组件的模板中说modal-template.html，您需要使用

<ng-content></ng-content>

根据Angular vocab，这称为内容投影。您可以详细了解内容投影 here

您也可以使用@ContentChild装饰器并通过ngAfterContentInit生命周期挂钩方法访问其引用，以访问呈现的HTML模板的引用。为此，请不要忘记为您的课程实现 AfterContentInit 接口！

如何捕获角度选择器内容以在组件中使用？

1 个答案: