- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
假设我在 ng-content 标签之间有一个预计的原生输入。我知道,我可以使用@ContentChild 获取对预计输入的引用。我想知道我怎么能检测到例如父组件中投影输入元素的焦点事件?
最佳答案
没有办法。 focus
事件不会冒泡,因此需要直接在元素上监听。
如果您可以使用@ContentChild()
获取引用,您可以使用
constructor(private renderer:Renderer) {}
someMethod() {
this.renderer.invokeElementMethod(
this.focusableChild.nativeElement,
'addEventListener', ['focus', onFocus.bind(this)]
);
}
如果您控制组件的使用方式,您可以将指令应用于您的内容,如 How to realize website with hundreds of pages in Angular2 中所述。通过调度父元素可以收听的自定义事件将 focus
事件转发到冒泡事件
@Component({
template: `... <ng-content></ng-content>
...
})
class MyComponent {
@HostBinding('custom-focus', ['$event'])
onFocus(event) {
...
}
}
关于angular - 在angular2的@contentChild中检测焦点事件的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37746058/
我正在使用 Angular 5 并尝试创建某种动态组件。 我有一个简单的指令,MyColumnDef (使用选择器 [myColumnDef] )。它没有什么特别之处。我正在使用它: 父组件.html
我有一个 Angular 组件 app-b,它在组件 app-a 中使用,该组件 app-a 在 app-component 中使用。 app-component 在 app-a 中有一些内容,app
我正在尝试获取一个元素的 ElementRef,我在该元素上使用 Directive 作为组件的 ContentChild 添加了自定义属性,但在内容初始化后记录它时我得到了 undefined。你能
我需要从选项卡组件数组中监听事件。这些选项卡发出“onMinimized”但是我宁愿在一行代码中连接到这些事件而不是输入 (onMinimized)="hide"对于模板中的每个选项卡组件条目。有一个
如果我有自定义指令 ParentDirective和自定义组件 ChildComponent安排如下: ...然后我可以使用 @ContentChild在指令中引用组件: @ContentC
我有两个组件 FormComponent 和 Test1Component。 Test1Component 使用 ng-content 显示 FormComponent FormComponent.t
我有两个组件 FormComponent 和 Test1Component。 Test1Component 使用 ng-content 显示 FormComponent FormComponent.t
我正在使用 Angular6 构建一个选项卡组件,并且只需要根据事件选项卡显示一个组件。我怎样才能做到这一点? 我有这个结构 Mi contenido 1
是否可以在 ContentChild 中设置多个选择器? 例如,我正在寻找类似的解决方案: @ContentChild(Case1 | Case2) 如果 Case1 不可用,则能够获取 Case2
我正在尝试设置一个 Angular2 组件,自动聚焦通过内容投影插入的输入元素。 我使用的解决方案基于 this answer .我有一个额外的要求,即输入元素可能嵌套在另一个组件中。但是,我发现 C
我正在尝试像这样设计一个可扩展的组件: Summary Heading Details alternate-title 部分应该是可选的。当 myFlag = false 时,组件应仅
我一直在尝试使用 @ViewChild(CustomDirective) 或 @ContentChild(CustomDirective) 分别使用该集来访问我在元素上应用的自定义指令第一次在我的 n
所以为了更好的说明会简化并尽量简洁。 My accordion My accordion item 1 Content 1
我正在寻找可用于通过 @ViewChild 和 @ContentChild 访问子组件/DOM 元素的有效选择器的完整列表。 假设我有一个 child HelloComponent: 我知道我可以添加
Angular 2 提供了@ViewChild、@ViewChildren、@ContentChild 和@ContentChildren 装饰器来查询组件的后代元素。 前两者和后两者有什么区别? 最
我有一个使用内容投影的组件。 我想在我的组件中做这样的事情: @ContentChild('button') button: ElementRef; 但是,当我检查 this.button 时,它
我花了更多时间试图理解以下博文 Creating Reusable Components with NgTemplateOutlet in Angular 上面帖子的工作代码可以在stackblitz
我有一个组件 app-preview,它有一个由它的父组件推送到它的 ng-content 中的组件。 app-preview父级的代码: 我希望 app-previe
我有一个用于正确显示验证错误的表单容器。我通过 ContentChild 装饰器访问表单控件并被动地操作它以构建验证消息。 我的问题是:如何正确地对这样的组件进行单元测试? 组件.ts import
我最近开始使用 ViewChildren and ContentChildren在 Angular 2 中,但现在想知道这些是否也可以在没有 TypeScript 注释的情况下在 ES6 中使用。 T
我是一名优秀的程序员,十分优秀!