Angular 具有多个视图的角度2组件

如何为角度2组件提供多视图\视图模板

---

我必须使用ng内容吗？这不是我想要的功能。可能是指定模板url的组件属性，但如何更改组件类中的视图\模板？

ng内容将用于定义组件内容的位置，解释如下：

假设您使用其模板和选择器“my cmp”定义自己的组件，如果您这样使用它：

content

，则组件中的div必须位于某个位置，这就是您在实现my cmp时在模板中定义的内容。说：

my component title

您的div将放在ng内容所在的位置

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

或者，如果你想显示其中一个，也许可以通过路由来处理

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

---

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

我就是这样处理的，尽管我不喜欢这个解决方案：

• 我有一个组件

  myComponent

  ，它呈现给

  选择器：“我的组件”

• 在我的主应用程序中，我创建了两个变量

  target:string='template one'

  和

  target2:string='template two'

• 我在我的应用程序模板中创建了两个组件实例，看起来像
  和

• 最后，在

  my component

  的模板中，我有两个不同的标记块，第一个用于when

  target==“template one”

  时，第二个用于when

  target==“template two”

  。在一个的外部html元素上，我放置了

  *ngIf=“target===”template one'

  ，在另一个的外部html元素上，我放置了

  *ngIf=“target===”template two'

  ，这有效地在渲染中创建了一个分叉

---

如果我能想出更好的办法，我可能会发回，但现在这是Angular 2给我的最好的办法。

今天也考虑一下这个问题。我“发明”了这个解决方案。也许它对你将来有帮助

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");
  }
}

导出类MyModel{
拉拉；
构造函数（）{
this.lala=“llaala”；
}
AppendToAla（参数：字符串）{
this.lala+=param；
} 
}
@组成部分({
选择器：“c1”，
模板：`Hello{{lala}}`，
})
导出类组件1扩展了MyModel{
构造函数（）{
超级（）；
本附录（简称“bebebe”）；
}
}
@组成部分({
选择器：“c2”，
模板：`Hello{{lala}}`，
})
导出类组件2扩展了MyModel{
构造函数（）{
超级（）；
本附录为“Nennene”；
}
}

---

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

不确定NG2是否有内置的方式来支持这一点

---

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

如果您只是试图根据组件中变量的值更改单用户会话视图中显示的内容，可以考虑将HTML包含在不同的div元素中，并使用ngIF或ngLwitter来切换它们。 这是一个快速而廉价的示例，如果组件中有一个名为“loading”的布尔变量，则可以在如下显示的内容之间切换：

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

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

加载。。。
...

我真正想要的是不让组件与视图耦合，这样我就可以像使用angular 1中的控制器一样使用它，在任何我喜欢的地方使用ngController，以视图mvvm风格编写我的应用程序。请查看此处：[link]。我相信您可以定义一个属性视图url，它是一个字符串，这样您就可以调用它，以及模板：templateUrl:（function（）{return this.viewURL；}）。尽管我不确定用例，因为不同的视图可能需要以稍微不同的方式处理事情，但这似乎是可能的。也许你需要一个指令？它是一个没有视图的组件，因此您可以将Functionality应用于不同的视图。请看这篇

@View（）

即将被删除。这篇文章的答案更清晰：我认为这是最“有角度”的建议