表示组件通常被引入作为可重用的组件。事实是,可重用性确实可能简单的组件,比如一个按钮,一个日期选择器,一个滑块,以及常见的通用组件中的一个会发现组件库等角材料。

如何促进可重用性当我们需要一个组件是高度可定制的吗?说,例如,你想创建一个组件,它显示选项卡。每次单击选项卡,将会呈现一些新的内容。内容必须是可定制的。这就是我们要讲的这篇文章。

解决方案1:Multi-slot投影内容

内容投影是易于使用,并提供明确的阅读语法,这始终是优先。退房我之前教程内容投影更多地了解它。

解决方案2:传递模板ng-template和ng-container

在一个角允许我们将一些HTMLng-template标签如下所示:

< ng-template >
保存
< / ng-template >

上面的内容不是默认在DOM中呈现。我们需要角按照模板来呈现它。

接下来,我将使用一个模板参考变量ng-template(标签语法),所以我有一个参考,参考,我可以使用该模板传递给另一个组件:

< ng-template#保存>
保存
< / ng-template >

我的目标是创建一个按钮,有三种不同的状态:初始状态、工作状态,完成状态。

那个按钮首先呈现一个模板作为一个初始状态传递,当我们点击按钮时,内容会呈现一个不同的模板的工作状态。最后,当行动由按钮完成后,我们想要呈现一个最终的模板。

实现这一行为,让我们创建一个组件StateButton。其模板看起来像这样:

<按钮(点击)= " triggerAction () " >
< ng-container* ngTemplateOutlet = " currentTemplate ">
< / ng-container >
< /按钮>

上面的ng-container是占位符是呈现我们的模板。为了有一个模板中呈现的容器,我们使用* ngTemplateOutlet通过引用现有的模板,如我们先前创建的。

以下是组件类会接受initialTemplate作为输入并使用它作为当前模板:

进口{组件、输入、OnInit,TemplateRef从“@angular} /核心”;/ / ....出口类StateButtonComponent实现OnInit {@Input ()
initialTemplate:TemplateRef<一>;currentTemplate:TemplateRef<一>;ngOnInit () {
这一点。currentTemplate = this.initialTemplate;
}
}

为了通过我的自定义模板引用该组件,我们需要做到以下几点:

< app-state-button[initialTemplate] =“保存”>
< / app-state-button >< ng-template#保存>
保存
< / ng-template >

我们使用@Input通过TemplateRef我们的组件。我们创建引用使用一个模板参考变量在一个ng-template元素(#保存在我们的示例中)。

如果我想通过多个模板,我多次应用相同的想法:

< app-state-button[workingTemplate] [initialTemplate] =“拯救”=“储蓄”(doneTemplate) =“保存”>
< / app-state-button >< ng-template#保存>
保存
< / ng-template >< ng-template#储蓄>
< img src = " https://github.com/alcfeoh/ng-advanced-workshop/raw/master/src/assets/loader.gif "风格= "宽度:20 px”>
< / ng-template >< ng-template#保存>
得救了!
< / ng-template >

当然,我们需要多个输入组件。让我们也添加一个示例操作触发异步任务我们可以切换之间的三个州:

从“进口{组件、输入、TemplateRef} @angular /核心”;
进口{可观察到的,计时器从“rxjs”};/ /……出口类StateButtonComponent {/ /这是一个可观测的RxJs完成后2秒
美元的行动=计时器(2000);@Input ()
initialTemplate: TemplateRef < >;@Input ()
workingTemplate: TemplateRef < >;@Input ()
doneTemplate: TemplateRef < >;currentTemplate: TemplateRef < >;/ /……triggerAction () {
这一点。currentTemplate = this.workingTemplate;
这一点。美元的行动.subscribe (
()= > t他的currentTemplate = this.doneTemplate
);
}
}

现在我们的代码是有效改变状态,我们点击按钮。使用三种不同的StateButton组件TemplateRefs呈现内容的按钮。

当然,这似乎是很多工作对于一个简单的按钮,但请记住,您可以使用机制更复杂的组件(如标签、数据表、对话框等。

你可以看到在这里Stackbitz这个示例的完整代码:https://stackblitz.com/edit/ng-template-outlets

我的名字是betway必威滚球。我是谷歌开发者角度方面的专家,以及成立顾问和教练角训练我帮助开发团队学习,成为精通角。

和角需要帮助吗?让我们安排一些时间来说话。我提供培训和现场培训。

如果你喜欢这篇文章,请为它鼓掌或分享它。我总是感激你的帮助。