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

// 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:

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

在我的项目中,FlexLayoutModule版本为9.0.0 @angular/cli版本为8.0
npm install @angular/flex-layout@8.0.0-beta.27

CSS position引发的问题




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

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

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)。


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 = {
            '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])

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();



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


<p style="white-space: pre-line">




what's the hosts file? The computer file hosts is an operating system file that maps hostnames to IP addresses

简单来说,就是个本机DNS,比如localhost的IP为127.0.0.1就是hosts文件定义的。 在进行DNS请求以前,Windows系统会先检查自己的Hosts文件中是否有这个地址映射关系,如果有则调用这个IP地址映射,如果没有再向已知的DNS 服务器提出域名解析。也就是说Hosts的请求级别比DNS高。