一个在Angular-2中动态绑定不同模板的组件

Question

我是Angular 2的新手。我见过一个组件总是与视图模板结合在一起，比如

@Component({
  selector: 'page-sample',
  templateUrl: 'sample.html',
  providers: []
})

我们可以动态地将Angular 2组件重用到不同的模板吗？

Answer 1

这并没有直接回答这个问题，但我想建议一种方法，在这种方法中，您可以使用(几乎)相同的组件拥有不同的视图。

我通常制作另一个组件，并让它扩展基本组件，以便重用相同的功能。

//base component with functionality
@Component({
  selector: 'page-sample',
  templateUrl: 'sample.html',
  providers: []
})
export class BaseComponent{
}

创建一个扩展BaseComponent的新组件，但可以使用不同的视图。

// another component with a different view.
@Component({
  selector: 'another-page-sample',
  templateUrl: 'another-sample.html',
  providers: []
})
export class AnotherComponent extends BaseComponent{
}