阿里云 Angular 2 UI框架 NG-ZORRO介绍

By admin in www.188bet .com 0 Comment

4： JavaScript 多语言定义

于JavaScript需要以客户端调用的多语言，可以以View中展开如下概念语言json:

<script>
var lang={loginID:”[#LoginID#]”,userName:”[#UserName#]”};
<script>

 

欠View会在Controller端提前会交替成相应语言的亲笔。

其后的援调用alert(lang.loginID)即可。

 

 

引子：

有关系统的多语言，我在前头的章都写过众多，包括秋色园QBlog的开源博客里，也起对应的实现方案，不过随着项目条件之不比，往往实现的方案为不尽相同。

今即使来扯扯，ASP.NET MVC下之方案。 

 图片 1

 2.1：MVC View的多语言流程：

 图片 2

经过对MVC的源码调试，发现于Control基类（自己定义）统一处理即可。

Demo代码：

        protected override void OnResultExecuted(ResultExecutedContext filterContext)
        {
            if (filterContext.Result is ViewResult)
            {
                string html = RenderViewToString(this, ((ViewResult)filterContext.Result).View);
                html = LanguageMgr.Replace(html,”zh”);
                Response.Clear();
                Response.Write(html);
            }
        }
        protected static string RenderViewToString(Controller controller, IView view)
        {
            //IView view = ViewEngines.Engines.FindView(controller.ControllerContext, viewName, masterName).View;
            using (System.IO.StringWriter writer = new System.IO.StringWriter())
            {
                ViewContext viewContext = new ViewContext(controller.ControllerContext, view, controller.ViewData, controller.TempData, writer);
                viewContext.View.Render(viewContext, writer);
                return writer.ToString();
            }
        }

同一开始的想法是处理终结晚形容回去，后来调试了一半龙源码发现找不交写回去的，灵光一闪，发现数以Response.OutPut流里，直接清空，输出新的Html即可。

  • 基于 ng-zorro-antd
  • 响应式
  • 国际化
  • ACL访问控制
  • 推加载与理想的启用画面
  • 完美的UI路由规划
  • 十种颜色版本
  • Less预编译
  • 美妙的目录组织结构
  • 大概升级
  • 模块热替换
  • 支持Docker部署

3：UI多语言的语法方案

界面标签定义：[#对象名称-字段名#]，标签内无同意带有空格。

要直接：[#字段名#]（由Controller自动取得对象名称处理）

例如：[#UserID#] 或者[#Login-UserID#]

中文时不时拿吃调换成：登陆名，英文就是Login了。

配套的Demo实现：

 public class LanguageMgr
    {
        /// <summary>
        /// 替换多语言。
        /// </summary>
        /// <param name=”html”></param>
        /// <param name=”lang”></param>
        /// <returns></returns>
        public static string Replace(string html, string lang)
        {
            MatchCollection matchs = Regex.Matches(html, @”\[#([\S\s]*?)#\]”, RegexOptions.Compiled | RegexOptions.IgnoreCase);
            if (matchs != null && matchs.Count > 0)
            {
                List<string> keys = new List<string>(matchs.Count);//记录都相当了的

                Dictionary<string, string> dic = GetLanguageDic(lang);
                foreach (Match match in matchs)
                {
                    string text = match.Groups[0].Value;
                    string key = match.Groups[1].Value.Trim();
                    if (!keys.Contains(key))
                    {
                        keys.Add(key);
                        if (dic.ContainsKey(key))
                        {
                            html = html.Replace(text, dic[key]);
                        }
                    }
                }
                keys = null;
                matchs = null;
            }
            return html;
        }
        internal static Dictionary<string, string> GetLanguageDic(string lang)
        {
            Dictionary<string, string> dic = new Dictionary<string, string>();
            dic.Add(“aaa”, “中文”);
            dic.Add(“bbb”, “英文”);
            return dic;
        }
｝

  

近年来披露说明

总结： 

如上的多语言方案，有一定的项目条件背景，仅供参考，讨论，借鉴，反省，请无轻易模仿。

谢谢观赏。

ABP框架前端UI应用NG-ZORRO源码分享：http://www.cnblogs.com/donaldtdz/p/8098948.html

前言：

有的是年无写文章了，工作颇忙碌，天天加班， 每天还相信不用多久，就见面升职加薪，当及总经理，出任CEO，迎娶白富美,走及人生巅峰，想想还闹接触小震动~~~~

截至后来发了邮箱事件，我竟忘了吃邮箱密码赋值，导致撞“邮箱不可用。 服务器响应也: 5.7.1 Unable
to relay for”的问题，网上一查后，让Boss去装IIS里之SMTP。

结果Boss力证不用安装也得发，还让自家作了N多Demo代码，让我蛋碎一地，
最后那点多少感动，就在及时有些事变及栽没了~~~

好了，不多扯了，回正文吧~~~

 

2：UI多语言

 图片 3

2.2：JS脚本的多语言流程：

图片 4

 

具体的兑现，看下面的语法定义。

文档查看官方网站：https://ng.ant.design/\#/docs/angular/introduce

1：数据的多语言：

于QBlog里，数据的多语言，我是分成两种方案并处理：

A：多长数，文章数量，用一个言语字段来标识该条数据为何种语言。

B：对于其余数据，标题，公告等，用一个[#LangSplit]标识来分隔前后两栽语言。

唯独本的方案有点不同，看如下图：

 图片 5

望大量的Xml字段了吧，这便是达标一个列后续而来之花，在档次里动不了真情存在。

有关表名和字段命名方式，走的凡国际范，大伙不要学。 

对Xml，需要有同等稍套处理方案：

数据库以Xml字段存档多语言，格式为：
<ML V=”1.0″>
  <M L=”zh-cn”>中文</M>
  <M L=”en”>English</M>
  <M L=”..”>其它语言</M>
</ML>

下一场针对这种存档，需要来照应的处理：

SQL:查询语法为：

取值：字段名.value(‘(/ML/M[@L=”zh-cn”])[1]’,’nvarchar(max)’) 
取节点：字段名.query(‘/ML/M[@L=”en”]’) 
判断：字段名.exists(‘/ML/M[@L=”zh-cn”]’) 
排序：用取值后底字段名展开排序

拍卖流程大体如下：

图片 6

 

 

设计说明：https://ant.design/docs/spec/introduce-cn

 图片 7

图片 8

下可以看一下地方运行效果：

 图片 9

图片 10

Github地址：https://github.com/NG-ZORRO/ng-zorro-antd

Github 模板资源：https://github.com/cipchk/ng-alain 
此是着重，可以直接拿来为此

华语文档说明： https://github.com/cipchk/ng-alain/blob/master/README-zh\_CN.md

动态图片：https://antv.alipay.com/zh-cn/index.html

 

图片 11

特性

尚对吧！赶快下载下来试试！！

Angular2出来后，一直想寻找个基于Angular2的前端后台管理框架，但一直尚未找到比较适合的。前段时间在Angular官网资源无意之间相NG-ZORRO，NG-ZORRO由阿里测算平台事业部、阿里云等不同机关的局部粗伙伴在原先工作组件的底子及一同构建而成，而且已开源，现在是0.6.0的版本，组件功能就充分齐全了，更符合我们国人使用习惯，已兼容Angular
5.0本。是目前为止我见了之无比完善、最好、最符合国人使用习惯的治本后台angular
2 UI模板。

图片 12

说明：

 图片 13

资源模板

图片 14

Leave a Comment.