javascript - 为什么在路由器解析完成之前， Angular 会解析模板？

Question

我正在使用 Angular 和 ng-route，并且希望在某些给定解析返回 false 时处理简单的重定向。但是，如果路由的模板包含 ng-bind-html，则会出现“错误:[$sce:unsafe] 尝试在安全上下文中使用不安全值”。即使没有理由在解析之前加载模板，也会触发错误。我找到的唯一解决方案是从解析中返回 null(false 不起作用)...

https://jsfiddle.net/pansay/wLkxkp5e/3/

.when('/abc/:id', {
        template: 'should not get here <span ng-bind-html="ctrl.someData"></span>', // if :id was not found
         controller: ['someData', function (someData) {
               this.someData = someData;
           }],
           controllerAs: 'ctrl',
        resolve: {
            someData: ['$location', function ($location) {
                // actual case: use the :id param to fetch data from some service
                // but redirect if it returns false
                $location.path('/abc');
                return false;
            }]
        }
    })

但这仍然意味着 Controller /模板仍然被解析，这似乎不是所需的/记录的行为，并且可能会触发其他问题......这有充分的理由吗？

Answer 1

当您从解析返回 false 时，您实际上表明解析正常，并且返回的 false 值将传递到作用域。因此它会在短暂重定向之前进入该状态，其值为 false。由于 someData 是用奇怪的数据解析的，因此您会看到异常等。

如果您要进行重定向，您需要做的是防止进入该状态。为此，您需要返回一个 promise 并拒绝它。

像这样:

someData: ['$location', '$q', function ($location, $q) {
            return fetchFromSomeService.then(
               function(valueFromService) {
                   if(valueFromService === false) {
                     return $q.reject();
                   }
                   return valueFromService; 
               }
          }]

对于您的代码示例，您只需执行以下操作即可使其正常工作:

someData: ['$location', '$q', function ($location, $q) {
                // actual case: use the :id param to fetch data from some service
                // but redirect if it returns false
                return $q.reject();
            }]