angular – 访问模板元素内的模板引用

发布时间：2020-12-17 07:30:58 所属栏目：安全来源：网络整理

导读：我正在使用一个库,希望我指定一个指令的主体作为模板元素的子元素 template customDirective custom-element #lookup/custom-element/template 有没有办法在我的组件中访问自定义元素#lookup. 例如, @Component({ selector: 'app-test',template: ` template

我正在使用一个库,希望我指定一个指令的主体作为模板元素的子元素

<template customDirective>
   <custom-element #lookup></custom-element>
</template>

有没有办法在我的组件中访问自定义元素#lookup.

例如,

@Component({
  selector: 'app-test',template: `
    <template customDirective>
       <custom-element #lookup></custom-element>
    </template>
  `
})
export class TestComponent {
  @ViewChild('lookup') viewChildRef;
  @ContentChild('lookup') contentChildRef;

  constructor() {
  }

  ngAfterContentInit(): void {
     console.log(this.viewChildRef); // <-- undefined
     console.log(this.contentChildRef); // <-- undefined
  }
}

在这两种情况下我都没有定义.

在不创建嵌入视图之前,无法获取模板内部组件的引用.

尝试使用setter,如：

@ViewChild('lookup') 
set lookUp(ref: any) {
  console.log(ref);
}

Plunker Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!