具有多个视图的Angular 2组件

Question

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

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

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

Answer 2

ng-content 用于定义组件内容的去向，解释如下：

假设您使用模板和选择器“my-cmp”定义自己的组件，如果您这样使用它：<my-cmp><div>content</div></my-cmp>，组件内的 div 必须位于某处，这就是您在实现 my-cmp 时在模板中定义的内容。说：<h1>my component title</h1><ng-content></ng-content>你的 div 将转到 ng-content 所在的位置。

现在，如果您想要有多个视图，我认为这是一个设计问题，并且很可能是两个不同的组件，然后父容器将包含它们。该父容器可以与您的服务进行通信，并为您的子组件提供它们需要显示自身的模型。当用户执行某些操作时，它们可以发出一个事件，父级捕获该事件，触发服务调用，并通过数据绑定向它们提供更新的模型。

或者，如果您想显示其中之一，也许可以通过路线来处理？

或者最后一种方法是 ng-if，如果模型中有某种状态，则显示一个子组件，否则显示另一个。

如果您更具体地了解您的需求，我可以模拟一些代码。