Question

当试图在不同模块中使用组件时，我正在尝试访问它的内容子项，但是我声明的内容子项变量始终为空。

我正在编写一个可以在应用程序中任何地方使用的组件。该组件应有权访问其标签内的ng-templates。它将使用这些模板上的输入来创建自定义数据网格或表。

当它们都在同一个模块中时，我可以使它正常工作，但是由于某种原因，当它在自己的模块中时，它将停止工作。

有关此代码示例，请参见此StackBlitz

https://angular-tfohdd.stackblitz.io

编辑：即使我提供了stackblitz示例，仍然有人要求提供代码，因此这里是为您提供方便的问题。

应用程序组件正在使用父组件，并在组件标签内声明了ng-template。我正在尝试使用带有属性选择器的指令来获取对ng-template的模板引用。如果“我的父母”位于应用程序模块内部，则此代码可以工作，但是由于它位于测试模块内，因此无法工作。

app.component.html ：它在应用模块内部

WITH ParentIdCTE (Id, BaseId, BaseMode, RecursionLevel)  
AS  
(  
SELECT 
    Id, 
    Id, 
    Mode,
    0 As RecursionLevel
FROM 
    #Table 

UNION ALL  

SELECT  
    p.Id, 
    e.Id, 
    e.Mode,
    p.RecursionLevel + 1  
FROM 
    ParentIdCTE As p        
INNER JOIN      
    #Table AS e      
ON 
    e.ParentId = p.BaseId  
WHERE
    p.BaseId <> 0 
    AND p.RecursionLevel < 10
)  
SELECT
    Id, 
    BaseId, 
    BaseMode
FROM
    ParentIdCTE 
INNER JOIN 
(
    SELECT
        Id As MaxRecId,
        MAX(RecursionLevel) as MaxRecLevel
    FROM 
        ParentIdCTE AS s
    GROUP BY
        Id
) AS MaxRec
ON
    MaxRecId = Id
    AND MaxRecLevel = RecursionLevel

parent.component.ts：：它在测试模块中

<my-parent>
    <ng-template myDirective myDirective2 title="Title1">
        <div></div>
    </ng-template>
</my-parent>

parent.component.html ：它在测试模块中

import { Component, Input, Directive, ContentChildren, AfterContentInit, QueryList, TemplateRef, VERSION } from '@angular/core';


@Directive({
  selector: '[myDirective]'
})
export class MyDirective  {
  @Input() title: string;

  constructor(public templateRef: TemplateRef<any>) {}
}


@Component({
  selector: 'my-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterContentInit  {
  @ContentChildren(MyDirective) details: QueryList<MyDirective>;  

  ngAfterContentInit(){
    console.log(this.details);
  }
}

test.module.ts ：

Work:
<div *ngFor="let detail of details"> 
  <div>title: {{detail.title}}</div>
  <ng-container *ngTemplateOutlet="detail.templateRef">
  </ng-container>
</div>

Answer 1

我能够通过在测试模块中导出指令来解决此问题：

test.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParentComponent, MyDirective } from './parent.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [ParentComponent, MyDirective],
  exports: [ParentComponent, MyDirective ]
})
export class TestModuleModule { }

Angular ContentChildren跨模块获取指令Input和TemplateRef

1 个答案: