Angular uiRouter嵌套状态不会改变html

Question

我有一个名为processParams的方法，应该通过调用ui-view来更改页面的this.state.go('coupons.login')。这会加载用户应该已经在其中的嵌套状态coupon。虽然调用this.state.go...，但它永远不会更改ui-view。为什么不改变它，我该如何解决？

路由器文件

'use strict';

angular.module('couponGeneratorApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('coupons', {
        url: '/generate-coupon',
        template: '<coupons></coupons>'
      })
      .state('coupons.login', {
        url: '/',
        templateUrl: '<h1>hello</h1>'
      });
  });

控制器文件

'use strict';
(function() {

    class CouponsComponent {
        constructor($state) {
            this.test = 'hello';
            this.state = $state;

            this.couponParams = {};
        }

        processParams() {
            if (!this.couponParams.amount || this.couponParams.amount <= 0) {
                alert('Enter a valid amount');
            } else if (this.couponParams.has_min && (!this.couponParams.min_order || this.couponParams.min_order < 0)) {
                alert('Enter a valid min order');
            } else {
                this.state.go('coupons.login');
            }
        }
    }


    angular.module('couponGeneratorApp')
        .component('coupons', {
            templateUrl: 'app/coupons/form.html',
            controller: CouponsComponent
        });

})();