在运行时分配Angular结构指令

Question

我试图在运行时将角度代码的*ngIf指令分配给模板.无法找到办法.view/templateref是一个选项吗？或者有一个不同的方式和一个更容易的方式.有可能首先吗？

更新:

代码有点混乱和混乱,所以避免它.但是这里是DOM代码的外观,以及为什么我需要动态添加内置结构指令.

<div>
  <input type="text" [value]="userProvidedValue">
  <textarea [value]="someDynamicDOMCodefromWYSIWYG">
    <!-- user provided provided code or dynamic code -->
  </textarea>
</div>
<div>
  <select *ngIf="fetchArraywithHttpFromuserProvidedValue">
    <option *ngFor="let val of fetchArraywithHttpFrom-userProvidedValue" value=""></option>
  </select>
</div>
<div>
  <ng-template>
    <!-- Some User provided code or dynamic code which might need to use *ngIf OR *ngFor -->
    <!-- The *ngIf OR *ngFor will be added dynamically based on a manipulator function which is decided from the value of fetchArraywithHttpFromuserProvidedValue -->
  </ng-template>
</div>

更新

我正在根据userProvidedValue值执行获取请求,并且获取请求的结果决定了fetchArraywithHttpFromuserProvidedValue数组.其次,基于fetchArraywithHttpFromuserProvidedValue从获取请求导出的值,决定是否在切换选项中显示用户提供的模板或预定的模板集.(只有部分用户提供的模板需要*ngIf指令.用户模板在JS中解析以获取所需的部分).该用例类似于创建从用户获取结构的HTML设计/页面的工具.这正是一个类似的工具,只是我没有创建一个创建用户定义的HTML页面的工具.

这个你能帮我吗.如果这是不可能的,那么请推荐一个替代方案,允许我类似地分配功能或在这种情况下让我解决方法.

更新2

如下面的一个答案所指出的,以下所有模板都无法使用elementref或使用ViewContainerRef + TemplateRef进行正确的解析/编译:

<input [value]="someVariableFromClass"/>

<input value="{{someVariableFromClass}}"/>

<div *ngFor="let item of items">{{item}}</div>

但是,如果在构建和加载应用程序之前模板位于DOM中(而不是动态添加),则以下方法有效:

<ng-template #tpl>
  <!-- Add the template to #vcr using ViewContainerRef from the class -->
    <div *ngFor="let item of items">{{item}}</div>
</ng-template>
<div #vcr>
    <!-- Add the template from #tpl using ViewContainerRef from the class -->
</div>

目前,我正在尝试Angular中的编译器API,并检查是否compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>可以帮助我在这个用例中.问题似乎是我将通过将html作为模板分配给组件来创建一个全新的组件,然后创建一个动态模块,然后在插入视图之前编译整个(逻辑我正在尝试当前 - 不工作然而).在此之后(如果我成功),我将尝试使用指令添加组件模板,并查看是否编译正确.欢迎任何帮助.看起来我最终可能会将静态指令添加到手动占位符并添加[innerHTML]= / safeHTML / Sanitize API,如果我不成功的话.虽然不太理想.如果可以,请帮助替代方案.

我正在使用这个例子,虽然它的plunkr目前无法正常工作.

如何使用/创建动态模板来使用Angular 2.0编译动态组件？

http://plnkr.co/edit/wh4VJG?p=preview

Answer 1

不，您无法动态添加结构指令，您需要通过思考您的应用程序稍后期望什么来实现它。

例如，如果您计划循环遍历一个数组，我猜这就是您查看代码后打算做的事情，您可以执行以下操作：

hotels: any;

<div *ngIf="hotels.length > 0">
  <div *ngFor="let item of hotels">{{item.name}}</div>
</div>