Angular2 - 如何執行僅限子組件的執行？

Question

在Angular2中，假設我有兩個組件，一個列表和一個列表項。 我希望列表項只能放在列表中：

<my-list>
    <my-list-item>Foo</my-list-item>
</my-list>

有沒有辦法在TypeScript中強制執行此操作？

Answer 1

在my-list-item組件中執行此操作

而my-list-item將不會呈現，如果它不是里面my-list

import {Component, ElementRef} from 'angular2/core';

@Component({
  selector: 'my-list-item',
  template: '<div *ngIf="insideMyList"> <ng-content></ng-content> </div>'
})
export class MyListItem{
  public insideMyList: boolean = false;

  constructor(elementRef: ElementRef) {
    if(elementRef['internalElement'].parent.nativeElement.localName == 'my-list')
     { 
        //do other stuff here
        this.insideMyList = true;
     }
  }
}