@ inputを使ってangular2の2つのコンポーネント間の通信に問題が発生しました。

Question

EDIT：index.htmlのすべてのhtmlをapp.component.tsテンプレートに移動したところ、テンプレートコードは解析されません。

私の問題は、サービスから読み込み、データをサイドバーに投稿するParentComponentがあることです。サイドバーの項目をクリックすると、そのページのメインセクションにその親に関する詳細が表示されます。私は@Inputを使用して2つのコンポーネント間の通信を試みていますが、起動していないようです。私はなぜそれほど確かではありませんが、それは比較的単純な問題のように思えるので、ノックアウトする必要がありますが、解決策を見つけられません。どんな助けもありがとうございます。

のindex.html：

<header> 
    <div class="content">This is a header</div> 
</header> 
<div class="container"> 
    <div class="sidebar"> 
     <div class="content"> 
     <parent-items></parent-items> 
     </div> 
    </div> 
    <div class="main-content"> 
     <div class="content"> 
     <my-app>Loading...</my-app> 
     <child-cmp [id]="selectedItem.id"></child-cmp> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
</div> 

子供-cmp.ts：

@Component({ 
    selector: 'child-cmp', 
}) 
export class ChildComponent { 
    @Input() set id(n) { 
    this.getData(n) 
    } 
    getData(id: number): void { 
    console.log('triggered'); 
    }; 
} 

parent.ts：

@Component({ 
    moduleId: module.id, 
    selector: 'parent-items', 
    template: `<ul class="items"> 
     <li *ngFor="let item of items" 
      (click)="selectedItem = item" 
      [class.selected]="item === selectedItem">{{item.name}}</li> 
     </ul>`, 
}) 
export class ItemsComponent implements OnInit { 
    items: Item[]; 
    selectedItem: Item; 
    constructor(private itemService: ItemService) {}; 
    getItems(): void { 
    this.itemService 
     .getItems() 
     .then(items => this.items = items); 
    } 
    ngOnInit(): void { 
    this.getItems(); 
    } 
} 

Answer 1

<child-cmp [id]="selectedItem.id"></child-cmp>はItemsComponentのテンプレートである必要があります。