Question

编辑：想出来。我将index.html正文中的所有html移动到app.component.ts，一切正常。以下答案是正确的方法。

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

编辑：另一个问题不一样，因为答案引用了在角度2的rc6版本中删除的directives。这个问题是后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>

子-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',
  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();
  }
}

Answer 1

听起来很合理。假设父组件具有<div *ngFor="let child of children"> <a (click)="currentChild = child">{{child.name}}</a> </div>标识符数组

父模板（侧边栏）

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

单击链接时，将设置当前子项。主要部分将显示当前的孩子。

父模板（主要）

@Input

在子级中使用/** 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) }接受新的子标识符。设置标识符后，您可以使用新数据填充子项。

子组件

class Things(object):

    def __init___(self, row, thingInfo):
        self.row = row
        self.thingInfo = thingInfo

    def doSomething(self, arg1, arg2): # beware the `self`
        for x in self.row:
            # do something with x, like:
            print(x)

# here is where you use Things
thing = Things([1, 2, 3], 'info')
thing.doSomething(1, 2)

angular2中的主要详细信息视图？

1 个答案: