【问题标题】:Is it possible to sanitize [routerLink]?是否可以对 [routerLink] 进行消毒?
【发布时间】:2018-09-30 07:46:12
【问题描述】:

我将未经处理的 html 注入到组件中。当路由参数发生变化时,我会去数据库并获取一些新的 html 并将其放入组件中。但是当我这样做时,我会收到消息SafeValue must use [property]=binding:

我的猜测是因为路线正在改变。我的 routerlink 生成如下所示:

<li routerLinkActive="active" *ngFor="let form of translationData.caseForms" ><a [routerLink]="[currentTransCode, 'form',form.ClaimTemplateID]" class="navbar-link">{{form.WebsiteLinkTitle}}</a></li>

以下是步骤:

  1. 转到http://localhost:4300/us/form/5406 - 没有错误

  2. 转到http://localhost:4300/us/form/6411 - 错误

form.component.html:

<div class="container" *ngIf="!loading">
  <div *ngIf="!isAuthenticated">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <strong>Login </strong>
        </h3>
      </div>
      <div class="panel-body">
        <div role="form">
          <div class="form-group">
            <label for="exampleInputEmail1">{{token1Label}}</label>
            <input type="email" class="form-control" id="exampleInputEmail1" required placeholder="Enter {{token1Label}}" #token1>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">{{token2Label}}

            </label>
            <input type="password" class="form-control" id="exampleInputPassword1" required placeholder="Enter {{token2Label}}" #token2>
          </div>
          <button type="button" (click)="login(token1,token2)" class="btn btn-sm btn-primary">Login</button>
        </div>
      </div>
    </div>

  </div>


  <div *ngIf="isAuthenticated">
    <div class="page-header paddingpushdown">
      <h2>{{formTitle}}</h2>
    </div>
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [model]="model" [fields]="fields" [options]="options" [form]="form">
        <button type="submit" class="btn btn-default">Submit</button>

      </formly-form>

    </form>
  </div>
</div>

包装未经处理的 html:

【问题讨论】:

    标签: angular


    【解决方案1】:

    如果你使用 [innerHTML] 绑定,Angular 会清理 HTML。

    <div [innerHTML]="html_goes_here"></div>
    

    我希望这个例子有帮助。但是,您似乎在询问[routerLink],所以这不太可能是您要找的。如果没有,您能否详细说明[routerLink] 中传递的参数?

    【讨论】:

    • 我将 html 传递给 ngx-formly。我无法控制使用 [innerHTML]。为什么我更改路线时它只显示错误?
    • 传入的参数是语言代码:例如'en'或'es'。单词“form”,后跟一个数字(6411 或 5406)
    • 它只在我开始更改路线时在屏幕上显示消息(从 5406 切换到 6411,反之亦然)
    • 你上面的例子是Formly生成的还是你可以控制的?
    • 我可以控制它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多