Question

我们使用的是反应式表格，根据某些条件，我们希望某些字段为自由文本或下拉列表。

我一直在思考实现此功能的方法，并且倾向于使用自定义指令，但不确定哪种解决方案是最好的，我正在寻找一种可重用的解决方案，因为它将在我们的应用程序中重复多次。

我正在调查类似这样的内容：How can I make a structural directive to wrap part of my DOM?

我认为使用渲染器是最好的选择，但是如果我使用属性或结构指令，这有关系吗？他们说使用结构来修改Dom，但是看起来也可以通过属性来完成。

Answer 1

我认为这样过度设计不是一个好主意。不要误会我的意思，您可以编写自己的自定义结构指令，您很可能就能实现所需的功能。但是此解决方案无法很好地扩展。我认为最简单的解决方案应该是最好的解决方案。这就是创建自定义组件并绑定变量，该变量将控制显示为输入的内容。

ifelse.component.html：

<mat-radio-group *ngIf="showOne;else other_content" >
  <mat-radio-button value="auto">Auto</mat-radio-button>
  <mat-radio-button value="always">Always</mat-radio-button>
  <mat-radio-button value="never">Never</mat-radio-button>
</mat-radio-group>
<ng-template #other_content>
  <mat-radio-button value="manual">Manual</mat-radio-button>
<ng-template #other_content></ng-template>

ifelse.component.ts

@Component({
  selector: 'app-ifelse',
  templateUrl: './ifelse.component.html',
  styleUrls: ['./ifelse.component.css']
})
export class IfelseComponent {

  @Input()
  private showOne: boolean;

}

用法：

<app-ifelse [showOne]="false"></app-ifelse>

Angular 4，使用自定义指令在不同的HTML模板之间切换

1 个答案: