通过@Input

时间:2019-06-21 16:07:00

标签: angular templates angular2-template

我将从托管组件上的组件使用开始:

<my-templated-component [content-template]="contentTemplate">
</my-templated-component>

<ng-template #contentTemplate>
  <h3>Hello There</h3>
  <div>Lorem ipsum..... </div>
  <custom-component></custom-component>
</ng-template>

现在,我组件的.ts:

class MyTemplatedComponent implements AfterContentInit {
  @Input('content-template') contentTemplate: TemplateRef<any>;
  @ContentChildren(CustomComponent) customComponentQueryList: QueryList<CustomComponent>;

  ...
  ngAfterContentInit() {

    // Length is 0 at this point. My component didn't find the component I want
    console.log(`There are ${this.customComponentQueryList.length} items`);

    this.customComponentQueryList.changes.subscribe((s) => {
      /* This is not called. This is where I would have wanted to find
         my CustomComponent to perform a task that requires its presence.
      */
    });
  }
}

这是MyTemplatedComponent的标记:

<ng-container *ngTemplateOutlet="contentTemplate">
</ng-container>

我了解到QueryList<CustomComponent>仅在ngAfterContentInit()可用。在不订阅的情况下,CustomComponentQueryList的项为零,因此从CustomComponent的{​​{1}}中找不到@Input。但是TemplateRef中的changes并未触发,因此我绝对找不到我的组件。

奇怪的是,我在页面上看到了QueryList<CustomComponent>@Input的所有内容,其中包括TemplateRef中的标记。因此,CustomComponent 是否检测到我输入的模板引用并通过MyTemplatedComponent显示它,但是*ngTemplateOutlet找不到我的QueryList


现在,如果我将CustomComponent更改为 @Input() contentTemplate: TemplateRef<any>,然后将模板{em> 放在@ContentChild('contentTemplate') contentTemplate: TemplateRef<any>的标签中,如下所示:

<my-templated-component>

<my-templated-component> <ng-template #contentTemplate> <h3>Hello There</h3> <div>Lorem ipsum..... </div> <custom-component></custom-component> </ng-template> </my-templated-component> QueryList 确实被触发,并且从订阅中可以找到我的changes

也许CustomComponent@ContentChild仅在以下情况下有效:并且仅当我直接将@ContentChildren用作组件标记的直接子元素/选择器,就像我在上面所做的那样。

但是我并不总是这样<ng-template>,有时候<my-templated-component>甚至可能来自托管组件之外。

如果我要做的只是将<ng-template #contentTemplate>放入并显示在模板组件中的某处,一切都很好,但是我需要研究{{的内容 1}}我会收到各种各样的目的。

如果TemplateRefs要求我将TemplateRefs放入组件的标签中,则等效的装饰器是什么(我认为没有装饰器,而且肯定不是@ContentChildren ),是否通过<ng-template>传递了@ViewChildren?有有效的解决方法吗?

最终,如果TemplateRef @Input不起作用,我们如何在模板化组件内部找到以TemplateRef传递的@Input内的某些组件?

0 个答案:

没有答案