Angular 2组件具有多个视图 [英] Angular 2 component with multiple views

问题描述

如何为Angular 2组件提供多个views \ view模板?

How can I give an Angular 2 component multiple views\view templates?

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

Do I have to use ng-content? Which is not exactly the function I want. Maybe a component property that specifies the template url, but then how to change the view\template in the component class?

推荐答案

今天也考虑这个问题.我发明"了此解决方案 http://plnkr.co/edit/FYVwbBwSnqWRcvAVz3wh?p=preview.可能会在将来对您有所帮助.

Today also think about this problem. I "invent" this solution http://plnkr.co/edit/FYVwbBwSnqWRcvAVz3wh?p=preview . May be it helps You in future.

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类将始终是该树中的叶子.

The idea is to create an abstract component model and use it as @Component's parent. And if needed, You can create a tree from models and @Component class will always be a leaf in this tree.

这篇关于Angular 2组件具有多个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！