在 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{
}