Question

我正在学习Angular 2。我已使用以下模板创建了一个组件。

<h1>My component</h1>
<placeholder?></placeholder?>

根据组件中的状态，我想显示不同的子组件而不是占位符标签。那可能吗？怎么样？

例如：假设我已将一项服务注入我的组件中。如果此服务返回1，我想显示ComponentOne，并且我希望显示其他组件的服务中的所有其他值。

Answer 1

您可以使用DynamicComponentLoader。

有关如何使用它的示例，请参阅Angular 2 dynamic tabs with user-click chosen components。我想链接答案中使用的包装器也适用于你。

Answer 2

对要显示的每个组件使用 * ngIf ：

<component1 *ngIf="service.value1"></component1>

<component2 *ngIf="service.value2"></component2>

Answer 3

我建议使用*ngIf来应用您的条件以及动态组件加载器。您也可以关注此plnkr以获得更多参考。

Dynamic Component Loader Example

您需要做的就是在要加载组件的div上应用*ngIf指令。

例如。

//our root app component
import {Component, View, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'dc',
  template: '<b>Some template</b>'
})   

class DynamicComponent {}

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="your condition">
        <div #container></div>
    </div>
  `
})   

export class App {
  dynamicComponentLoader: DynamicComponentLoader;
  constructor(dynamicComponentLoader: DynamicComponentLoader, elementRef: ElementRef) {
    this.dynamicComponentLoader = dynamicComponentLoader;
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');

  }

}

根据状态显示不同的组件？

3 个答案: