在特定部分加载Angular 2组件

时间:2017-02-10 22:34:16

标签: angular

我的目标是在面板组件中加载表组件,基本上是

我有3个组成部分:

@Component({
  selector: 'parent',
  template: '<h1>Title!</h1><div #child></div>',
})
export class ParentComponent {
  title = 'Parent'
}

@Component({
  selector: 'child',
  template: '<div>I'm the {{title}}</div>',
})
export class ChildComponent {
  title = 'Child'
}


@Component({
  selector: 'other-child',
  template: '<div>I'm the {{title}}</div>',
})
export class OtherChildComponent {
  title = 'Other'
}

如何加载标记为#child?的父div中的任何组件,如

load('#child',OtherChildComponent)

1 个答案:

答案 0 :(得分:0)

只需在父模板中使用您的子选择器

<h1>Title!</h1>
<child></child> <!-- will contains <div>I'm the child</div>  -->
<other-child></other-child> <!-- will contains <div>I'm the other</div> -->