Angular2：仅使用较大 HTML 文件中的一个代码块答案

【问题标题】：Angular2: Using only one block of code from a bigger HTML-fileAngular2：仅使用较大 HTML 文件中的一个代码块
【发布时间】：2017-07-31 18:40:37
【问题描述】：

对于我在 Angular2 中的项目，我试图从一个更大的 HTML 文件中检索特定的代码块。根据所走的路线，它应该显示一个紧凑或详细的视图。

我认为最好的做法是为每个可能的视图制作不同的模块，但是这样的模块太多了。是否可以使用 *ngIf 来检查要显示或隐藏的内容？或者有其他解决方案吗？

视觉表现

【问题讨论】：

你绝对可以用*ngIf

标签： html angular routing components

【解决方案1】：

在此答案之前，我不知道@Input() 和@Output()，将它们与*ngIf="" 结合使用我已经能够解决这个问题。

家长： task-detail.component.ts

...
export class TaskDetailComponent implements OnInit {
   extendedCustomer: boolean;
}

task-detail.component.html

...
<app-customerview [extendedCustomer]="false"></app-customerview>
...

孩子： customerview.component.ts

import { Component, OnInit, Input } from '@angular/core';
...
export class CustomerViewComponent implements OnInit {
   @Input() extendedCustomer: boolean;
}

customerview.component.html

<!-- Simple-->
...
<!-- Extended-->
<div *ngIf="extendedCustomer">
   <p>detailed information here</p>
</div>

来源：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

编辑：我不确定，但可能是您不需要在父级中定义布尔值（使 task-detail.component.ts 中的代码什么都不做)

【讨论】：