Question

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

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

Answer 1

今天也想想这个问题。我发明了＃34;这个解决方案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用于定义组件内容的去向，解释如下：

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

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

或者，如果你想显示一个或另一个，可以用路线处理它？</ p>

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

如果你对你的需求更加具体，我可以模拟一些代码。

Answer 3

这就是我处理它的方式，虽然我不喜欢这个解决方案：

我有一个组件myComponent，可以呈现给selector: 'my-component'。
在我的主应用中，我创建了两个变量target:string = 'template-one'和target2:string = 'template-two'。
我在我的应用模板中创建了两个组件实例，看起来像<my-component [target]="target"></my-component>和<my-component [target]="target2"></my-component>。
最后，在my-component的模板中，我有两个不同的标记块，第一个用于target === "template-one"，第二个用于target === "template-two"。在外部html元素上，我放置*ngIf="target === 'template-one'"，在外部html元素上放置另一个，我放*ngIf="target === 'template-two'"，这有效地在渲染中创建了一个分支。

如果我想出更好的东西，我可能会回复，但是现在这是Angular 2给我的最好的。

Answer 4

不确定NG2是否有内置的支持方式。

看起来你需要两个组件，但是你有一个，并且你想找到一个最快的方法。但最好的解决方案是将复杂的逻辑拆分为不同的结构（如服务，其他模块等）。制作结构舒适的最佳方式。当你构建这个结构时 - 你不需要多个html到指令。

Answer 5

如果您只是尝试根据组件中变量的值更改单个用户会话视图中显示的内容，则可以考虑将html包含在不同的div元素中，并使用ngIf或ngSwitch进行切换他们。

一个快速且便宜的示例，如果您的组件中有一个名为“ loading”的布尔变量，则可以在显示的内容之间进行切换，如下所示：

<div *ngIf="loading">
    <h1>Loading...</h1>
</div>

<div *ngIf="!loading">
...
</div>

具有多个视图的Angular 2组件

5 个答案: