You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to. See Doc app.component.ts: imp…

Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template. For…

Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Componentdecorator. impor…

Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate between your defined routes. app.component.html: <nav> <a r…

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r…

Index router as default router. import {RouterModule} from "@angular/router"; import {NotFoundComponent} from "./shared-components/not-found/not-found.component"; const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'}; co…

Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import { Component, OnInit } from '@angular/core'; import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; import { Title…

在使用queryselector获取一个dom元素,编译时却报错说property 'style' does not exist on type 'element'. 原因:这是typescript的类型检查导致的,需要在querySelector方法前面加个类型断言. let frameContainObj = document.getElementById("model_view_container") let iframeObj= <HTMLElement>frame…

在angular中使用element 1.在一个新建的angular的项目中插入element npm i --save element-angular 2.在项目中的styles.css中插入文件,下列文件放进去即可 @import "~element-angular/theme/index.css"   3.在app.module.ts中插入下列文件 import {ElModule} from 'element-angular'; 在此文件的imports中插入 ElModule…

In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use the function navigateByUrl to navigate using a manually constructed string, but we are also going to l…

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing…

You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that…

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional…

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different bet…

The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re h…

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t…

路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则. 示例: 路由设置如下: export const reportRoute: Routes = [ { path: 'report', children: [ { path: '', component: ReportComponent },{ path: ':id', component: ReportDetailComponent },{ path: 'report-new',…

Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see each category has an own 'View detials' button, and there is a side menu on the right side. What we want is when we click the "View details" butt…

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also goi…

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example…

In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed…

Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module. Use the Wiki Search as example project. Create a HomeComponent to contain every…

创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm install -g angular-cli ,等待安装完成,就可以打开webStorm创建项目了. 1.首先需要创建一个project. 可以看到图片上有两个关于Angular的选择.一个是AngularJS,这个创建的是基于Angular1.0版本类的project.另一个Angular CLI创建的才是基…

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different bet…

From router v3.1.0, we have preloading system with router. PreloadAllModules After the init module loaded, router will preloading the rest module at the background. const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'}; const fallbackR…

In the application, we have heros list, when click each hero, will redirect to hero detail view. That means, hero detail component will get inited everytime. Currently there is no option to navigate to bewteen two hero detail. Currently, we use Obser…

更新 : 2018-01-10  大半年过去了依然没有做 server side render 的冲动,但是一直有关注这方便的做法. 今天领悟了一些道理, 这里做个记入. server side render 其实也不只是为了 SEO, 而且自从 Google 能渲染 js 之后更加不重要了. 其它使用的地方比如 fb, whatsap, wechat 的爬虫都是可以用到 server side render 的 ssr 有一个规则就是远离 dom, 其实应该说 "render" 的时…

navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo : ActivatedRoute queryParams : Params fragment : string preserveQueryParams : boolean preserveFrag…

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time. animations:[ trigger('signal', [ state('void',…

The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup is often used in combination with fieldset as they mostly represent the same…