具有多个 View 的 Angular 2 组件

Question

如何为 Angular 2 组件提供多个 View \ View 模板？

我必须使用 ng-content 吗？这不完全是我想要的功能。也许是指定模板 url 的组件属性，但是如何更改组件类中的 View \模板？

Answer 1

今天也在思考这个问题。我“发明”了这个解决方案 http://plnkr.co/edit/FYVwbBwSnqWRcvAVz3wh?p=preview .可能对你有帮助。

export class MyModel {
  lala;
  constructor() {
    this.lala = "llaala";
  }
  appendToLala(param: string){
    this.lala += param;
  } 
}

@Component({
  selector: 'c1',
  template: `<div><h2>Hello {{lala}}</h2></div>`,
})
export class Component1 extends MyModel {
  constructor(){
    super();
    this.appendToLala(" bebebe");
  }
}


@Component({
  selector: 'c2',
  template: `<div><h2>Hello {{lala}}</h2></div>`,
})
export class Component2 extends MyModel {
  constructor(){
    super();
    this.appendToLala(" nenene");
  }
}

想法是创建一个抽象组件模型并将其用作@Component 的父级。如果需要，您可以从模型创建一棵树，@Component 类将始终是这棵树中的一片叶子。