- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个自定义复选框指令,可以在传统标签/跨度样式中添加样式以及一些其他功能。它在自身周围注入(inject)包装器,并在旁边注入(inject)跨度。我刚刚意识到,当放置在结构指令中时,它无法操作 DOM。大多数设置是在构造函数中完成的,但我认为这可能需要更多的 Angular 生命周期感知才能与结构父级一起使用。
问题 DOM 示例:
<ng-container *ngIf="test">
<!-- <div class="row align-middle"> -->
<input type="text" alloy placeholder="you should see a checkbox">
<input type="checkbox" alloy alloyLabel="default">
<!-- </div> -->
</ng-container>
有了注释的 div 就可以了。但是,将 ng-container 作为其直接父级,渲染器无法注入(inject) DOM。这是构造函数:
constructor(
protected el: ElementRef,
protected renderer: Renderer2,
protected focusMonitor: FocusMonitor,
@Host() @Optional() protected identityDirective: AlloyIdentityDirective) {
super();
// If we don't have a label wrapper, create one
this.labelElement = this.renderer.parentNode(el.nativeElement);
if (!(this.labelElement instanceof HTMLLabelElement)) {
const label = this.renderer.createElement('label');
// Inject wrapper then move native element (input) within it.
this.renderer.insertBefore(this.labelElement, label, this.el.nativeElement);
this.renderer.removeChild(this.labelElement, this.el.nativeElement);
this.renderer.appendChild(label, this.el.nativeElement);
this.labelElement = label;
// We must add the span because that's what actually gets the check styling
this.styledElement = this.renderer.createElement('span');
this.renderer.appendChild(this.labelElement, this.styledElement);
}
没有实际错误。在有缺陷的情况下(ng-container
的直接父级)我最终得到了初始元素,但没有注入(inject): <input type="checkbox" alloy alloyLabel="default">
带 wrapper div
我得到了预期的注入(inject)(删除了 _ngcontent*):
<label class="alloy-check-wrapper">
<input alloy="" alloylabel="default" type="checkbox" class="alloy-check">
<span></span>
<span class="alloyLabel">default</span>
</label>
最佳答案
这很可能是因为当一个元素位于 ng-container 的顶层时,它的构造早于 ngIf 变为真时,即在它被添加到 DOM 之前。
要解决此问题,您需要将修改 DOM 的逻辑从构造函数移至 ngOnInit,例如:
constructor(
protected el: ElementRef,
protected renderer: Renderer2,
protected focusMonitor: FocusMonitor,
@Host() @Optional() protected identityDirective: AlloyIdentityDirective) {
super();
}
ngOnInit() {
// If we don't have a label wrapper, create one
this.labelElement = this.renderer.parentNode(el.nativeElement);
if (!(this.labelElement instanceof HTMLLabelElement)) {
const label = this.renderer.createElement('label');
// Inject wrapper then move native element (input) within it.
this.renderer.insertBefore(this.labelElement, label, this.el.nativeElement);
this.renderer.removeChild(this.labelElement, this.el.nativeElement);
this.renderer.appendChild(label, this.el.nativeElement);
this.labelElement = label;
}
// We must add the span because that's what actually gets the check styling
this.styledElement = this.renderer.createElement('span');
this.renderer.appendChild(this.labelElement, this.styledElement);
}
对于修改 DOM,这几乎肯定是一种更好的做法,因为在构造函数执行的那一刻,您永远无法确定它是否正确存在于 DOM 中。
关于Angular 结构指令和 Renderer2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52276376/
我需要在每个渲染帧完成后拍摄屏幕截图,但我发现某些屏幕截图是重复的,所以我想知道是否可以在渲染完成之前保存屏幕截图。因此... renderer.render() 会阻塞直到完成渲染吗? 如果没有,有
web.py 骨架代码中的“render._keywords['globals']['render'] = render”是什么意思? http://webpy.org/skeleton/0.3 最佳
所以在我的 Nuxt universal-mode 应用程序中,我有时会出现错误: vue.runtime.esm.js:620 [Vue warn]: The client-side rendere
我想创建一个 portal-like effect使用 Bevy . Unity 似乎有一个 render texture实现这一目标。 有没有办法在 Bevy 中做同样的事情?如果没有, futur
我有一个看起来像这样的组件(非常简化的版本): const component = (props: PropTypes) => { const [allResultsVisible, setA
编辑:我调整了代码,但问题仍然存在。见下文 我有这个 p:selectOneRadio : 而这个 p:radioButton : 和 AData包含其
为了渲染部分我可以使用 render 'partial_name' 或 render partial: 'partial_name' 我开始知道 render 是 render partial 的简写
我注意到文章中的一些地方使用了 React.render() 和一些地方 ReactDOM.render()。这两者有什么具体区别吗? 最佳答案 这是 0.14 中引入的最新更改。他们将 React
我的代码是这样的: function render() { renderer.render( scene, camera ); renderer.clear(); } 我想知道为什么它
我目前正在实现 useSWR 以便从我的 express 和 mongo-db 后端获取数据。我能够从数据库中成功获取数据没问题。以下是我用来实现此目的的代码: ```//SWR method for
我只有在按照 React native - "this.setState is not a function" trying to animate background color? 的建议合并了 u
所以我有一个大的纹理,被分成 64x64 block 。 我使用将其加载到 LibGDX texture = new Texture("texturemap.png"); regions = Text
我对放置 @Scripts.Render 和 @Styles.Render 的位置感到很困惑。理想情况下,我会将它们全部放在 head 部分中,但出乎意料的是,例如 @Scripts.Render("
我正在尝试使用 jamon 来收集使用 Tapestry 的网站的统计信息(呈现网页的时间)。 我怎样才能拥有 服务器收到请求时执行的方法,即渲染开始时? 响应全部发送完毕,即渲染结束时执行的方法 ?
在我的 React 应用程序中,我想要渲染一个 prop 值,但直到渲染完成后更新 props 后它才存在。 this.props.users 是一个对象,因此我使用 Object.keys() 转换
我正在使用 React 的钩子(Hook),我希望有一个从数据库中检索到的值作为初始值。但是,我收到以下错误: Invariant Violation: Invariant Violation: Re
我正在尝试按照以下代码将多个场景包含到单个 webgl 渲染器中: renderer.render(scene1, camera); renderer.render(scene2, camera);
我在我的 xhtml 页面中使用此代码,当我运行应用程序时,元描述仍在呈现。我想根据某些条件使用元描述标签。主布局: ..........
我正在使用react-native-render-html来渲染html。renderers方法允许我提供自定义函数来呈现特定标签。不过,我想使用源代码中的原始内部 HTML 将子组件替换为我的自定义
我有一个网格,可以渲染可变高度的卡片。 为了获取卡片的高度,我将卡片渲染在 ReactHeight 中。 ( https://github.com/nkbt/react-height ),这让我可以在
我是一名优秀的程序员,十分优秀!