javascript - 在运行时分配 Angular 结构指令

Question

我正在尝试在运行时将 Angular 代码中的 *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 作为模板分配给组件来创建一个全新的组件，然后创建一个动态模块，然后在插入到 View 之前编译整个组件(我目前正在尝试的逻辑 - 不工作然而)。在此之后(如果我成功了)，我将尝试使用指令添加组件模板并查看是否编译正确。欢迎任何帮助。看来我最终可能会向手动占位符添加静态指令并添加 [innerHTML]= / safeHTML / Sanitize API ，如果我不成功。虽然不理想。如果可以，请提供替代方案。

我正在使用这个示例，尽管它的 plunkr 目前无法正常工作。

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

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

Answer 1

您不会在 *ngIf 中调用 fetch 方法。 *ngIf="..." 中的 ... 每次 Angular 决定进行更改检测时都会执行，并且每秒可能执行数十次。您不想为自己的后端部署 DDOS。

这就是为什么您应该在此处放置一个类似 isUserProvidedValueValid 的字段并在您的 HttpClient 调用的订阅中更新该字段:

userProvidedValue: any;
isUserProvidedValueValid: boolean = false;

constructor(private httpClient: HttpClient) {}

doFetch() { // called by a button-click for example
    this.isUserProvidedValueValid = false;
    this.httpClient
      .get<any>(SOME_URL)
      .subscribe(res => {
          if (res) { // you might have a complex check here, not just not-undefined
               this.isUserProvidedValueValid = true;
          }
          // you might consider putting this in the if-clause and in the *ngIf only check for userProvidedValue being not null
          this.userProvidedValue = res;
      });
}

现在对于您的用户提供的代码:首先，您需要对其进行清理。你可以在指令中使用管道来完成它(你不需要使用 ng-template，你可以使用普通标签的 innerHtml)就像这个例子:https://stackoverflow.com/a/39858064/4125622

  template: `<div [innerHtml]="html | safeHtml"></div>`,

或者在上面代码中的.subscribe()之前，你可以做

// domSanitizer needs to be injected in constructor as well
.map(res => this.domSanitizer.bypassSecurityTrustHtml(res)); 

如果您需要转换此代码，您可以添加另一个 .map()-RXJS-mapper 或另一个自定义管道 - 这取决于您喜欢哪种转换器。在转换器中，您可以使用 VanillaJS 来操作用户代码。也许 HTML-parser-plugin 或 JSON-toHTML-parser-plugin 或类似的东西可能对您有用 - 取决于您的用户提供的数据类型。