Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define Styles inline, then choosing which styles to use based on the current values in your Controller. import {Componen…

一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-new-directive 四.创建管道 ng g pipe my-new-pipe 五.ngModel指令 1.虽然 ngModel 是一个有效的 Angular 指令,不过它在默认情况下是不可用的. 它属于一个可选模块 FormsModule,必须自行添加此模块才能使用该指令. // app.mod…

import {Input, Component, View, NgClass} from "angular2/angular2"; @Component({ selector: 'todo-item-render' }) @View({ directives: [NgClass], styles: [` .started{ color: green; } .completed { text-decoration: line-through; } `], template: ` <…

当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. 首先还是要来讲一讲 ng lint 的相关知识: 通过Angular CLI的执行语句 ng new XXX 创建新项目后,目录中会包含一个tslint.json文件,这个文件就是用来定义一个统一的代码风格. 有一些错误可以通过 ng lint -fix 自动解决,这个过程也许比较漫长.能自动修复的…

Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { Location } from '@angular/common'; import { Hero } from…

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates. import…

This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable component. toggle-button.ts: import {Component, Input,…

如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433.6) -> 1356.3 (1433.6) MB, 1194.3 / 0.0 ms allocation failure GC in old space requested [13724:0000020D39C660D0] 232615 ms: Mark-sweep 1356.3 (1433.6) -&…

The way to test router componet needs a little bit setup, first we need to create a "router-stubs.ts". This file is a helper file. // export for convenience. export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router'; impo…

If sometime you want to log out the comonent html to see whether the html render correctly, you can do : import {TestBed, async, ComponentFixture} from '@angular/core/testing'; import {AppComponent} from './app.component'; import {AuFaInputComponent}…