Angular2 - 引导具有多个组件的应用程序答案

【问题标题】：Angular2 - Bootstrap an app with multiple componentsAngular2 - 引导具有多个组件的应用程序
【发布时间】：2017-07-19 08:06:12
【问题描述】：

我是 Angular2 的新手，我对如何引导我想要创建的应用程序有一些想法。

基本上我需要创建一个带有多个面板的简单仪表板。面板本身是显示一些结果的常见对象。

这是面板对象的示例模型（我正在使用 TS）：

name :string;
data: Array<string>;

这里是link的结构简单图：

仪表板组件创建 3 个面板，将一组数据传递给每个面板。面板从仪表板接收数据，运行 render() 函数并在自己的视图中显示数据。

这是一种正确的架构方法吗？

【问题讨论】：

Angular 组件中没有 render() 方法。但是是的，一个父组件可以显示 3 个子组件。
render() 将是一个做事的自定义函数，例如调用另一个子组件（即：resultTableComponent、renderChartComponent）。
您不会以角度“调用”组件。您应该首先了解组件的工作原理。练习简单的示例，然后开始编码以使您的设计适应框架的实际工作原理。

标签： angular

【解决方案1】：

您只需通过创建带有selector 名称的元素，在您的父模板中指定您的子组件。要传递数据，您可以使用来自@angular/core 的@Input 装饰器。

看看官方docs。

以下是您的仪表板（父级）的外观：

import { Component } from '@angular/core';

@Component({
   selector: 'dashboard-component', 
   template: `
      <panel-component [name]="'Panel One'" [data]="['1', '2']" ></panel-component>
      <panel-component [name]="'Panel Two'" [data]="['3', '4']" ></panel-component>
      <panel-component [name]="'Panel Three'" [data]="['5', '6']" ></panel-component>          `
})
class DashboardComponent { }

还有面板（子）

import { Component, Input } from '@angular/core';

@Component({
   selector: 'panel-component', 
   template: `<p>{{name}}</p> 
              <div *ngFor="let d of data">
                 <p>{{d}}</p>
              </div>
             `
})
class PanelComponent {
   @Input('name') name: string;
   @Input('data') data: Array<string>;
}

Here is a plunker你可以试试！

【讨论】：

我不清楚的是如何与子组件交互。例如，如果我在 PanelComponent 中定义了一个打乱数据的函数，如何从 Parent 组件中调用？