显示/隐藏来自不同组件的代码中的模式，Angular 4 Typescript Project

在Angular 4 Typescript项目中，显示/隐藏来自不同组件的代码中的模式可以通过使用Angular的指令和属性来实现。

一种常见的方法是使用ngIf指令来根据条件显示或隐藏组件的代码块。ngIf指令接受一个布尔表达式，如果表达式的值为true，则显示该代码块；如果为false，则隐藏该代码块。例如，假设我们有两个组件：ComponentA和ComponentB，我们想要根据某个条件来显示或隐藏它们的代码块。

在父组件的模板中，我们可以使用*ngIf指令来根据条件来显示或隐藏不同组件的代码块。示例代码如下：

<ng-container *ngIf="condition">
  <app-component-a></app-component-a>
</ng-container>

<ng-container *ngIf="!condition">
  <app-component-b></app-component-b>
</ng-container>

在上面的代码中，我们使用*ngIf指令来根据条件"condition"的值来显示或隐藏不同组件的代码块。如果"condition"为true，则显示ComponentA的代码块；如果为false，则显示ComponentB的代码块。

另一种方法是使用hidden属性来控制组件的显示和隐藏。hidden属性接受一个布尔表达式，如果表达式的值为true，则隐藏该组件；如果为false，则显示该组件。示例代码如下：

<app-component-a [hidden]="condition"></app-component-a>
<app-component-b [hidden]="!condition"></app-component-b>

在上面的代码中，我们使用hidden属性来根据条件"condition"的值来显示或隐藏不同组件。如果"condition"为true，则隐藏ComponentA；如果为false，则隐藏ComponentB。

这些方法可以根据具体的需求来选择使用。需要注意的是，*ngIf指令会在条件不满足时从DOM中移除组件，而hidden属性只是通过CSS来隐藏组件。因此，如果需要频繁切换显示和隐藏，使用hidden属性可能会更高效。