Question

我需要创建一个模板，在该模板中，将根据变量值动态定义本机html标签。

我尝试使用一个自定义指令，该指令将初始定义的标签替换为所请求的新标签，例如here。尽管该解决方案似乎在一定程度上可行，但是它破坏了内部HTML内容与Component Class的变量和事件绑定。换句话说，对Component Class变量的更改不再对呈现的html产生影响。

在Vue中，有一种非常简单的实现方式：

final finder = find.byWidgetPredicate(
  (widget) => widget is Switch && widget.key == myKey && widget.value == true,
  description: 'Switch is enabled');

expect(finder, findsOneWidget);

例如<component :is="tagName" class="foo" style="color:red"> anything inside component </component>，将导致

tagName = 'p'

我想知道是否会有类似的角度解决方案。任何帮助都会很棒。

Answer 1

为什么不只是有条件地添加指定的元素？

<container-element [ngSwitch]="tagName">  
  <elementType1 *ngSwitchCase="tagName1">...</elementType1>
  <elementType2 *ngSwitchCase="tagName2">...</elementType2>
  <elementTypeDefault *ngSwitchDefault>...</elementTypeDefault>
</container-element>

或使用基本的*ngIf：

<elementType1 *ngIf="tagName1_expression">anything inside component</elementType1>
<elementType2 *ngIf="tagName2_expression">anything inside component</elementType2>

Answer 2

请参考下面的链接，可能会对您有所帮助

change tag at run time angular

replace-tag.directive.ts

let compressedData = fileData.compress(withAlgorithm: .LZFSE) as Data

如何基于价值创建动态标签

2 个答案: