如何获取Angular 2中父组件中NG-Content内部使用的指令的列表

Question

我正在尝试创建一个我创建data-table component，col-header directive和col-body directive的数据表组件。这个想法是从col-header directive获得列标题的标签，并从col-body directive获取值，然后data-table component呈现数据表。但是问题是

1. 我无法获得我作为@Input传递给指令的价值。
2. 我没有使用@ContentChildren
来获得col-header组件中CC_8指令的转换

请考虑我刚刚开始学习Angular 2，M不太擅长。我的代码设置如下

datatablecomponent.ts

       @Component({
         selector: 'data-table',
         template: `
                  <table class="table table-bordered table-striped">
                       <thead>
                          <tr *ngFor="let header of headders ">
                            <ng-template></ng-template>
                             <td>{{header.label}}</td>
                          </tr>
                        </thead>
                       <tbody>
                           <ng-template></ng-template>
                       </tbody>
                       </table>,
           styleUrls: ['./data-table.component.css']
         })
         export class DataTableComponent implements OnInit {
         @ContentChildren(Header) headers: QueryList<Header>;
      }
     @Input() items: User[];
     ngOnInit() {
       }
    ngOnChanges(changes: SimpleChanges): void {
   console.log(changes)
    console.log(this.headers)
   }
 }

colheadercomponent.ts

            @Directive({
                   selector: 'col-header',
            })
            export class Header implements OnInit {
                 constructor() {
                  }
                 @Input() label: string;
                 @Input() value: any;
                ngOnInit() {
                   console.log(this.label)
                  }
               ngOnChanges(changes: SimpleChanges): void {
                   let chng = changes['label'];
                  console.log(chng)
                   }
               }

我的使用如下

     <data-table [items]="users">
          <col-header [label]="Name"></col-header>
         <col-header [label]="Password"></col-header>
         <col-body [column]="username"></col-body>
          <col-body [column]="password"></col-body>
     </data-table>

我没有写任何有关col-body指令的东西，因为我还没有到达那里。请耐心查看代码，因为可能有很多错误。

我只想简单地了解如何使用@Input获得往返组件的价值以及如何使用@ContentChildren

获得儿童指令的反应

谢谢

Answer 1

尝试此

 @ContentChildren(forwardRef(() => Header), {descendants: true}) headers: QueryList<Header>;