Question

我有一个使用Ajax调用进行动态HTML渲染的菜单组件，因此当用户单击其中一个菜单项时，浏览器不会刷新。我们使用jQuery-ajax-unobtrusive来执行Ajax调用。这部分效果很好。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!-- Some HTML ... -->
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/Home/Contact"
                       data-ajax="true"
                       data-ajax-method="GET"
                       data-ajax-mode="replace"
                       data-ajax-success="setUrl"
                       data-ajax-failure="redirectToLogin"
                       data-ajax-update="#renderbody">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

我使用像这样的Ajax回调

data-ajax-success="setUrl"
data-ajax-failure="redirectToLogin"

我想知道这些回调是否可以封装在Angular2＆＃39;在Typescript中编写的组件函数？目前，我有一个Javascript错误，告诉它无法找到方法＆＃39; setUrl＆＃39;和＆＃39; redirectToLogin＆＃39;。

Answer 1

以下是自定义Angular2指令中的示例实现：

@Directive({
  selector: '[data-ajax]',
  host: {
    '(click)': 'onClick($event)'
  }
})
export class DataAjaxDirective {
  @Input('href')
  url:string;
  @Input('data-ajax')
  enabled:boolean;
  @Input('dataAjaxMethod')
  method:string;
  @Input('dataAjaxMode')
  mode:string;
  @Output('data-ajax-success')
  success:EventEmitter<any> = new EventEmitter();
  @Output('data-ajax-failure')
  failure:EventEmitter<any> = new EventEmitter();

  constructor(private http:Http) {
  }

  onClick(event) {
    event.preventDefault();
    event.stopPropagation();

    this.http[this.method.toLowerCase()](this.url).map(res => res.json()).subscribe(
      (data) => {
        this.success.emit(data);
      },
      (err) => {
        this.failure.emit(err);
      }
    );
  }
}

以及使用它的方式：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <a href="https://mapapi.apispark.net/v1/maps/"
                   data-ajax="true"
                   dataAjaxMethod="GET"
                   dataAjaxMode="replace"
                   (data-ajax-success)="onDataReceived($event)"
                   (data-ajax-failure)="redirectToLogin()"
                   data-ajax-update="#renderbody">Contact</a>

      <ul>
        <li *ngFor="#map of maps">{{map.name}}</li>
      </ul>
    </div>
  `,
  directives: [ DataAjaxDirective ]
})
export class AppComponent {
  onDataReceived(data) {
    this.maps = data;
  }
}

请参阅此plunkr：https://plnkr.co/edit/Csw9bq7Ufa3bGXkqpSyN?p=preview。

Answer 2

JQuery需要全局setUrl函数：window.setUrl = function(){};这是不可能的。

您可以使用自定义Directive编写自己的jquery.unobtrusive-ajax.js实现。

组件函数作为Ajax回调

2 个答案: