- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
更新:
正确的问题可能是:“如何实现我自己的 ng-container
版本以便我可以使用” <my-component ...>...</my-component>
“而不是”<ng-container my-directive ...>...</ng-container>
".
我正在使用 Angular 4 开发一个新的应用程序。我想用包装组件构建我的整个应用程序,这样我就可以在需要时换掉实际的组件。这对于简单的控件很容易工作,但对于我们想要分解成单独组件的复杂控件则不行。最好的例子是选项卡,因为要求相当稳定:带有我们显示/隐藏的标签和内容面板的选项卡列表。
ng-bootstrap 可能会使用这样的东西:
<ngb-tabset>
<ngb-tab title="Tab 1">
<ng-template ngbTabContent>...</ng-template>
</ngb-tab>
...
<ngb-tabset>
我们可能还有这样的其他组件:
<div class="my-tab-group">
<ul>
<li>Tab 1</li>
...
</ul>
<div class="my-tab" title="Tab 1">...</div>
...
</div>
此时我不想将我的应用程序绑定(bind)到特定的实现,而是想定义我自己的选项卡包装器并像这样在任何地方使用它:
<my-tabs-control>
<my-tab-control title="Tab 1">...</my-tab-control>
...
<my-tabs-control>
然后,如果我需要更改选项卡的工作方式,它会在一个地方发生。但是,如果我们使用包装器组件,那么 HTML 会被宿主元素标签污染,这些标签与所需的标签交织在一起,这显然会把事情搞砸,例如
<my-tabs-control>
<div class="my-tab-group">
<ul>
<li>Tab 1</li>
...
</ul>
<my-tab-control title="Tab 1">
<div class="my-tab" title="Tab 1">...</div>
</my-tab-control>
...
</div>
<my-tabs-control>
我猜这就是为什么很多人问如何在 Angular 组件中解包/删除宿主元素的原因 - 这会让这件事变得非常简单。
通常的答案是改用属性选择器,例如:
Remove the angular2 component's selector tag
How to remove/replace the angular2 component's selector tag from HTML
但是,这意味着我们需要知道使用站点的标签结构,这显然破坏了使用命名良好的包装标签的全部意义。
因此,最后,我应该怎么做呢?由于性能原因,这可能是不可能的吗?我已经开始研究 Renderer2,但还没有找到一种明显的方法来做我想做的事情,我想避免非 Angular DOM 黑客攻击。
最佳答案
我有一个可行的解决方案,尽管不如我希望的那么优雅。我更喜欢“摆脱主机元素”的选项,因为那样会更整洁。
我通过简单地检查他们如何在 ng-bootstrap 项目中实现选项卡得出这个解决方案:https://github.com/ng-bootstrap/ng-bootstrap .
解决方案是使用@Component 作为主容器,然后对所有内部子组件使用@Directives。通常我们将指令用作其他元素的附加组件 - 但在这里我们将指令用作实际元素。这似乎像一个既不呈现自己的内容也不创建自己的主机容器的组件一样工作。相反,它允许宿主组件决定如何处理指令的内容。额外的条件是我们必须使用 ng-templates - 我看不出如何在不使用 ng-templates 的情况下直接投影指令内容。
以下是我如何使用我的包装器组件标记选项卡容器:
<my-tab-container>
<my-tab title="Tab 1">
<ng-template myTabContent>
This is panel 1!
</ng-template>
</my-tab>
<my-tab title="Tab 2">
<ng-template myTabContent>
This is panel 2!
</ng-template>
</my-tab>
<my-tab title="Tab 3">
<ng-template myTabContent>
This is panel 3!
</ng-template>
</my-tab>
</my-tab-container>
这是我的选项卡包装器组件的最小实现,其中包括用于单个选项卡和选项卡内容的两个指令。
import { Component, OnInit, Directive, ContentChildren, QueryList, Input, TemplateRef, ContentChild } from '@angular/core';
@Directive({ selector: 'ng-template[myTabContent]' })
export class TabContentDirective {
constructor(public templateRef: TemplateRef<any>) { }
}
@Directive({ selector: 'my-tab' })
export class TabDirective {
@Input()
title: string;
@ContentChild(TabContentDirective)
content: TabContentDirective;
public getTemplateRef() {
return this.content.templateRef;
}
}
@Component({
selector: 'my-tab-container',
templateUrl: './tab-container.component.html',
styleUrls: ['./tab-container.component.scss']
})
export class TabContainerComponent implements OnInit {
@ContentChildren(TabDirective)
tabs: QueryList<TabDirective>;
constructor() { }
ngOnInit() {
}
}
现在我可以通过切换选项卡容器组件的 HTML 模板来呈现不同类型的选项卡。
例如对于 ng-bootstrap:
<ngb-tabset>
<ngb-tab *ngFor="let tab of tabs">
<ng-template ngbTabTitle>{{tab.title}}</ng-template>
<ng-template ngbTabContent>
<ng-template [ngTemplateOutlet]="tab.content.templateRef"></ng-template>
</ng-template>
</ngb-tab>
</ngb-tabset>
例如对于 Angular Material2:
<md-tab-group>
<md-tab *ngFor="let tab of tabs" label="{{tab.title}}">
<ng-template [ngTemplateOutlet]="tab.content.templateRef"></ng-template>
</md-tab>
</md-tab-group>
或其他一些自定义的东西(jQueryUI 风格):
<ul>
<li *ngFor="let tab of tabs">{{tab.title}}</li>
</ul>
<div *ngFor="let tab of tabs">
<ng-template [ngTemplateOutlet]="tab.content.templateRef"></ng-template>
</div>
这意味着我们现在可以在所有地方向 UI 添加选项卡(和所有其他类型的控件),而不必担心我们是否为我们的项目选择了最好的组件 - 如果需要,我们可以稍后轻松切换.
(希望这不会引入性能问题!)
关于angular - 在 Angular 4 中实现包装器组件的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46117522/
这个问题已经有答案了: How to do case insensitive string comparison? (23 个回答) 已关闭 3 年前。 用户在我的输入栏中写入“足球”,然后执行第 6
啊,不习惯 javascript 中的字符串。 character_id= + id + correct= + correctOrIncorrect 这就是我需要制作成字符串的内容。如果您无法猜测字符
$(function() { var base_price = 0; CalculatePrice(); $(".math1").on('change', function(e) { Calc
我找不到任何文章回答问题:将Spinnaker部署到Spinnaker将管理的同一Kubernetes集群是否安全/正确?我主要是指生产,HA部署。 最佳答案 我认为Spinnaker和Kuberne
我正在使用MSVC在Windows上从源代码(官方源代码发布,而不是从仓库中)构建Qt5(Qt 5.15.0)。 我正在设置环境。变量,依赖项等,然后运行具有1600万个选项的configure,最后
我需要打印一个包含重复单词的数组。我的数组已经可以工作,但我不知道如何正确计算单词数。我已经知道,当我的索引计数器 (i) 为 49 时,并且当 (i) 想要计数到 50 时,我会收到错误,但我不知道
我正在遵循一个指南,该指南允许 Google map 屏幕根据屏幕尺寸禁用滚动。我唯一挣扎的部分是编写一个代码,当我手动调整屏幕大小时动态更改 True/False 值。 这是我按照说明操作的网站,但
我有一个类“FileButton”。它的目的是将文件链接到 JButton,FileButton 继承自 JButton。子类继承自此以使用链接到按钮的文件做有用的事情。 JingleCardButt
我的 friend 数组只返回一个数字而不是所有数字。 ($myfriends = 3) 应该是…… ($myfriends = 3 5 7 8 9 12). 如果我让它进入 while 循环……整个
这个问题在这里已经有了答案: Is there a workaround to make CSS classes with names that start with numbers valid?
我正在制作一个 JavaScript 函数,当调整窗口大小时,它会自动将 div 的大小调整为与窗口相同的宽度/高度。 该功能非常基本,但我注意到在调整窗口大小时出现明显的“绘制”滞后。在 JS fi
此问题的基本视觉效果可在 http://sevenx.de/demo/bootstrap-carousel/inc.carousel/tabbed-slider.html 获得。 - 如果你想看一看。
我明白,如果我想从函数返回一个字符串文字或一个数组,我应该将其声明为静态的,这样当被调用的函数被返回时,内容就不会“消亡”。 但我的问题是,当我在函数内部使用 malloc 分配内存时会怎样? 在下面
在 mySQL 数据库中存储 true/false/1/0 值最合适(读取数据消耗最少)的数据字段是什么? 我以前使用过一个字符长的 tinyint,但我不确定它是否是最佳解决方案? 谢谢! 最佳答案
我想一次读取并处理CSV文件第一行中的条目(例如打印)。我假设使用Unix风格的\n换行符,没有条目长度超过255个字符,并且(现在)在EOF之前有一个换行符。这意味着它是fgets()后跟strto
所以,我们都知道 -1 > 2u == true 的 C/C++ 有符号/无符号比较规则,并且我有一种情况,我想有效地实现“正确”比较。 我的问题是,考虑到人们熟悉的尽可能多的架构,哪种方法更有效。显
**摘要:**文章的标题看似自相矛盾。 本文分享自华为云社区《Java异常处理:如何写出“正确”但被编译器认为有语法错误的程序》,作者: Jerry Wang 。 文章的标题看似自相矛盾,然而我在“正
我有一个数据框,看起来像: dataDemo % mutate_each(funs(ifelse(. == '.', REF, as.character(.))), -POS) # POS REF
有人可以帮助我使用 VBScript 重新格式化/正确格式化带分隔符的文本文件吗? 我有一个文本文件 ^分界如下: AGREE^NAME^ADD1^ADD2^ADD3^ADD4^PCODE^BAL^A
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我是一名优秀的程序员,十分优秀!