angular-ui-router 的 1.0.3以上版本的$state.href 返回null问题

因为有个需求是点击控件弹出新页面,而在controller中使用$state.go是在原页面打开。

所以需要先使用$state.href 获取连接,再使用

window.open(url, '_blank');
在新页面打开。

最近升级angular-ui-router 到最新版本1.0.15后
$state.href 返回为null,经过检测,发行1.0.3版本和以后的版本把
 UrlMatcher.prototype.format
这个函数改了。


新版本的代码

 StateService.prototype.href = function (stateOrName, params, options) {
        var defaultHrefOpts = {
            lossy: true,
            inherit: true,
            absolute: false,
            relative: this.$current,
        };
        options = defaults(options, defaultHrefOpts);
        params = params || {};
        var state = this.router.stateRegistry.matcher.find(stateOrName, options.relative);
        if (!isDefined(state))
            return null;
        if (options.inherit)
            params = this.params.$inherit(params, this.$current, state);
        var nav = (state && options.lossy) ? state.navigable : state;
        if (!nav || nav.url === undefined || nav.url === null) {
            return null;
        }
        return this.router.urlRouter.href(nav.url, params, {
            absolute: options.absolute,
        });
    };

调用UrlRouter.href

  UrlRouter.prototype.href = function (urlMatcher, params, options) {
        var url = urlMatcher.format(params);
        if (url == null)
            return null;
        options = options || { absolute: false };
        var cfg = this._router.urlService.config;
        var isHtml5 = cfg.html5Mode();
        if (!isHtml5 && url !== null) {
            url = '#' + cfg.hashPrefix() + url;
        }
        url = appendBasePath(url, isHtml5, options.absolute, cfg.baseHref());
        if (!options.absolute || !
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI 是一个基于 Vue.js 的 UI 组件库,如果要在 Angular 中使用 Element-UI,需要先安装 Vue.js,并且在 Angular 中集成 Vue.js。 具体步骤如下: 1. 安装 Vue.js 在 Angular 项目中安装 Vue.js,可以使用 npm 命令进行安装: ``` npm install vue --save ``` 2. 安装 Element-UIAngular 项目中安装 Element-UI,同样可以使用 npm 命令进行安装: ``` npm install element-ui --save ``` 3. 集成 Vue.js 在 Angular 中集成 Vue.js,可以使用 ngx-build-plus 插件。在 Angular 项目中安装 ngx-build-plus: ``` npm install ngx-build-plus --save-dev ``` 然后在 angular.json 文件中配置 ngx-build-plus: ``` "architect": { "build": { "builder": "ngx-build-plus:browser", "options": { "extraWebpackConfig": "./extra-webpack.config.js" }, "configurations": { "production": { "extraWebpackConfig": "./extra-webpack.config.js" } } } } ``` 在 extra-webpack.config.js 文件中配置 Vue.js 的 loader: ``` const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' } ] }, plugins: [ new VueLoaderPlugin() ] } ``` 4. 在 Angular 中使用 Element-UIAngular 中使用 Element-UI,需要先在组件中引入 Vue.js 和 Element-UI: ``` import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI) ``` 然后在组件中使用 Element-UI 的组件: ``` <template> <el-button>Button</el-button> </template> <script> export default { name: 'MyComponent' } </script> ``` 这样就可以在 Angular 中使用 Element-UI 了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值