如何解决如何从模板引用中获取元素引用,该模板引用作为输入传递给角度组件
我需要捕获角度组件中的输入元素引用。
我们通常使用@ViewChild
(引用模板中的元素)或@ContentChild
(引用注入内容中的元素)
就我而言,我将模板引用作为@Input
传递给Angular组件。
@Component({
selector: "app-test",template: `
<h1>Test component rendering Custom Template Ref passed as input</h1>
<ng-container [ngTemplateOutlet]="customTemplateRef"></ng-container>
<br /><br />
<button (click)="printRef()">Log Input Ref in Console</button>
`,styleUrls: ["./test.component.css"]
})
export class TestComponent {
@Input() customTemplateRef: TemplateRef<any>;
@ViewChild("inputRef",{ static: false }) inputRef: ElementRef<
HTMLInputElement
>;
printRef() {
console.log("this.inputRef");
console.log(this.inputRef);
}
}
...
...
// template which passed from parent component is
<ng-template #customTemplateRef>
<input type="text" placeholder="Sample Text Box" #inputRef />
</ng-template>
如何访问TestComponent
中的输入元素引用?
当用户单击
TestComponent
中的任意位置时,我需要在Scenerio中使用它来聚焦输入元素。
我尝试了ViewChild
,ContentChild
都没有成功:(
请协助解决。谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。