angular2中的主细节视图？

编辑：算出了。我将

index.html

正文中的所有html移动到

app.component.ts

中，一切正常。下面的答案是正确的方法

我的问题是我有一个ParentComponent，它从服务读取数据，并将数据发布到侧栏。当您单击侧边栏中的某个项目时，它应该在页面的主要部分发布有关该父项的详细信息。由于它需要两个不同的模板，我认为解决方案是使用父子关系，其中父对象是侧栏，子对象是细节部分，我将数据传递给子对象以显示。听起来对吗？有没有更好的办法解决这个问题？我尝试过各种方法，但它们似乎都过时了，因为它使用了不再使用的

指令

编辑：另一个问题不一样，因为答案引用了angular2的rc6版本中删除的指令。这个问题是rc6之后的问题

编辑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>

parent.ts：

@Component({
  moduleId: module.id,
  selector: 'parent-items',
  templateUrl: `<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();
  }
}

@组件({
moduleId:module.id，
选择器：“父项”，
templateUrl:`

{{item.name}
`，
})
导出类ItemsComponent实现OnInit{
项目：项目[]；
选择编辑项：项目；
构造函数（私有itemService:itemService）{}；
getItems（）：void{
这是一项服务
.getItems（）
.然后（items=>this.items=items）；
}
ngOnInit（）：void{
这是getItems（）；
}
}
听起来很合理。假设父组件有一个
子组件
标识符数组

父模板（侧栏）

另一个问题可能重复的地方不一样，因为答案引用了angular2 rc6版本中删除的指令。这个问题是rc6之后的问题。指令仍然是angular2的一部分。如果你能提供更多信息，那就太好了。我所看到的一切都指向rc6中删除的指令，我无法在文档中删除它们。只有谷歌angular2指令？很多文件。几乎所有东西都是从它们扩展而来的，比如组件。尝试一下这是有道理的，但我在实现这一点上遇到了困难。设置id似乎不会触发
@输入。我在原来的帖子里贴了一些代码。没关系，我找到了。我只需要将
index.html
主体中的所有html移动到
app.component.ts
，因为模板代码不会在index.html中解析。这就是我的问题，否则你的方法就完美了。谢谢
@Component({
  moduleId: module.id,
  selector: 'parent-items',
  templateUrl: `<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();
  }
}

<div *ngFor="let child of children">
    <a (click)="currentChild = child">{{child.name}}</a>
</div>

<child-cmp [id]="currentChild.id"></child-cmp>

/** Get details from server and populate local variables */
getData(id){
    this.http.get('/api/children/'+id).map(data => data.json()).subscribe(
        data => { this.name = data.name; }
    );
}

/** Executed whenever a new id is set */
@Input() set id(n){ this.getData(n) }