Angular Router 变化改变底部栏图标

构造函数中监测路由变化,这个方法对hash路由也适用

router.events.subscribe((e: RouterEvent) => {console.log(e.url);})

如果当前urlgardevoir.yoga/home或者gardevoir.yoga/#/home, 打印出来内容为'/home'

//home.html
<img src="assets/home.svg" alt="home" width="40px" *ngIf="isHome">
<img src="assets/home_released.svg" alt="home" width="40px" *ngIf="!isHome">
// home.ts
constructor(private router: Router) {
    router.events.subscribe((e: RouterEvent) => {
        if (e.url === '/home') {
           this.isHome = true;
        } else this.isHome = false;
    });
}

这是一个比较蠢的方法,如果有其他更好的方法会更新,同时期待分享。

STM32F429 Hello World教程

目的:使用TouchGFX在F429触控屏上显示图片。

打开TouchGFX新建Project

黄框修改项目名称,红框选择相应的开发板,橙框选择模板,这里没有选择模板

STM32F429 Discovery显示屏的分辨率为240 x 320

选择一张相同分辨率的图片(格式为png)放到以下目录:项目名/TouchGFX/assets/images

在TouchGFX的images中可以看到图片

单击添加images控件

选中控件,在右侧加载图片

单击右上角run simulator可以看到效果

模拟界面成功后,就可以生成代码并烧写到开发板上看实际运行结果,点击右上角的 Generate Code

确认开发板与PC连接好,点击Run Target,右下角会有提示信息

以下按钮会新建一个新的screen

如果误操作想要删除,选中相应screen,单击edit删除。

在模拟输出的过程中出现以下报错信息,已有STM32 Cube,在相应路径下载STM32Cube Programmer

在使用模板新建项目的过程中,模板通常是最新版本代码,若使用旧版TouchGFX打开会失败,请确保使用的是最新版本TouchGFX。

mat-tab-group选中指定tab触发事件

使用selectedTabChange方法结合selectedIndex可实现。

selectedTabChange监听tabs是否切换,selectedIndex返回被选中tab的索引。

// component.html
<mat-tab-group (selectedTabChange)="change()" [(selectedIndex)]="index">
  <mat-tab label="fiest">
    Content 1
  </mat-tab>
  <mat-tab label="second">
   Content 2
  </mat-tab>
</mat-tab-group>

// component.ts
change() {
  if (this.index === 1) {doSomething();}
}

New a project with Angular Material

1 Install Node.js and NPM

It is not mandatory to use node.js for developing angular application. You can very well go ahead without node.js for developing angular application but it would not be wise to do so. Let me explain you some of the reasons how node.js makes angular app development process easier for us:

  • Node allows you to spin up a lightweight web server to host your application locally in your system.
  • NPM (Node Package Manager) comes with node.js by default. NPM allows you to manage your dependencies. So, you don’t have to worry for operations like adding a dependency, removing some, updating your package.json.
  • Third and the most important, npm gives you angular cli or ng cli(angular command line interface) . Angular CLI is a great tool for scaffolding your application. So, you don’t need to write boilerplates manually.
  • Angular recommends the use of TypeScript. Now, your browser does not understand TypeScript. It needs to be transpiled to JavaScript. Also, you need to bundle your js files and stylesheets together with the html doc so as to get the web app CLI which is ready to be hosted. Angular CLI helps you to do all these behind the scene. By default, ng cli uses webpack for bundling your application and is very helpful for beginners who have just jumped into web development with angular as it abstracts such complexities.
  • Resource: https://www.quora.com/Why-does-Angular-2-need-Node-js

2 Install Angular CLI

  npm install -g @angular/cli

3 New Project

IDE: IntelliJ IDEA, or “ng new project-name”

4 Install Angular Material

  ng add @angular/material

5 Use Material component in your project

  • import module in module.ts
  • use component in component.ts

No provider for FlexOffsetStyleBuilder

多模块项目: 每个模块都要导入 FlexLayoutModule

版本问题:模块版本与cli版本不同
在我的项目中,FlexLayoutModule版本为9.0.0 @angular/cli版本为8.0
解决:删除FLexLayout模块,重新下载
npm install @angular/flex-layout@8.0.0-beta.27

CSS position引发的问题

背景:实现如下顶部导航栏

将第一行位置设置为fixed,元素被移出正常文档流。第二行被第一行挡住

相关文档解释:

fixed元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transformperspective 或 filter 属性非 none 时,容器由视口改为该祖先。

更多:
static该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 toprightbottomleft 和 z-index 属性无效。

relative该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局
的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。
position: relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

sticky元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hiddenscrollauto, 或 overlay时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)。

解决:position改为relative

mat-toolbar {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
position: relative;
z-index: 2;
}

JSON to URL Parameters

I need convert json object to url form like: “parameter=12&asd=1”

I done with this:

        var data = {
            'action':'actualiza_resultado',
            'postID': 1,
            'gl': 2,
            'gl2' : 3
        };

        var string_=JSON.stringify(data);

        string_=string_.replace(/{/g, "");
        string_=string_.replace(/}/g, "");
        string_=string_.replace(/:/g, "=")
        string_=string_.replace(/,/g, "&");
        string_=string_.replace(/"/g, "");

But i wonder if there any function in javascript or in JSON object to do this?

jQuery provides param that does exactly that. If you don’t use jquery, take at look at the source.

Basically, it goes like this:

url = Object.keys(data).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')

2019 update: there’s now a built-in object URLSearchParams for this type of thing:

let myParams = {'foo': 'hi there', 'bar': '???'};

let u = new URLSearchParams(myParams).toString();

console.log(u);

https://stackoverflow.com/questions/14525178/is-there-any-native-function-to-convert-json-to-url-parameters

前端回车(换行)显示成空格

请求到的字符串渲染到html页面,换行通常没有我们想要的换行效果 ,除非你把字符串放在<pre>标签中 ,这是因为文本中的回车是'\n''\n\r',而html中的回车是<br />

但是<pre>标签通常会出现一个致命的问题,在手机端没法响应式(responsive)的显示,我的解决方法是添加white-space属性。

<p style="white-space: pre-line">
  {{text}}
</p>

关于white-space用法: https://www.w3school.com.cn/cssref/pr_text_white-space.asp