lee727n的博客

总结一下路径参数和查询参数，为了方便大家对比观察 写在一起方便对比路径参数的配置--查询参数的配置{ path: ':tabLink',component: HomeDetailComponent,}{path: 'home',component: HomeContainerComponent,}路径参数的跳转--查询参数的跳转1.<a [routerLink]="['/home',tablink]"></a>2.this.router.navig

路由的模块写法_MIKE-zi的博客-优快云博客首先参考上篇文章angular 路由基础_MIKE-zi的博客-优快云博客1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(

首先参考上篇文章angular 路由基础_MIKE-zi的博客-优快云博客1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。 * 启用路由的 de

1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。 * 启用路由的 debug 跟踪模式，需要在根模块中设置

脏值检测需要我们知道的1.单项数据流，从根节点检查到当前页面节点2.脏值检测时候的声明周期更新dom以后 脏值检测需要走两次。下面我们配置一个demo演示。首先配置我们需要的demorouting里面路径配置const routes: Routes = [ { path: 'home', component: HomeContainerComponent, }, { path: 'change-detection', path..

引入拦截器 ngModule中引入拦截器@NgModule({ declarations: [AppComponent], imports: [ ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: NotificationInterceptor, multi: true }, ], bootstrap: [AppComponent]})使用方法1 拦截修改请求头

使用方法类似服务，就是引入之后直接注入，只不过不用providers引入，使用module的方式引入@NgModule({ declarations: [AppComponent], imports: [ HttpClientModule, ],})使用的地方：import { HttpClient } from '@angular/common/http';@Injectable({ providedIn: 'root'})export class Hom

1.指令 directive指令就像是属性 需要宿主元素 改变宿主元素的样式 appGridItemImage appGridItemTitle <img appGridItemImage="2rem" [src]="item.icon" alt="" /> <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>详细参考anglar指令的使用_lee727n的博客-CSD

首先理解一下angular的服务的本质就是依赖注入 我们写在一个ts文件中 其实service就是一个Injector@Injectable()class Product { constructor( private name: string, private model: string, private color: string, private price: number, private type: string ) { }}export

指令其实就像是自己给组件添加的一个属性使用的地方 .html中 <span appGridItem *ngFor="let item of channels"> <img appGridItemImage="2rem" [src]="item.icon" alt="" /> <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>

投影的概念 就是组件里面的ng-content部分 可以被组件外部包裹的元素替代。 <ng-content select="[appGridItem]"></ng-content>例如，我们现在有个组件 <app-horizontal-grid> <span appGridItem *ngFor="let item of channels"> <img appGridItemImage="2rem" [src]="

使用的地方 模板.html<p> {{ date | appAgo }}</p>使用的地方 .ts this.date = this.minusMonths(new Date(), 24); minusMonths(date: Date, months: number) { const result = new Date(date); result.setMonth(result.getMonth() - months); re

angular中括号的意义，还是通过我们之前封装的tabbar来分析<app-scrollable-tab [menus]="topMenus" backgroundColor="green" titleColor="#fff" tilteActiveColor="yellow" (tabSelected)="handleTabSelected($event)"></app-scrollable-tab>组件内部接收background的属性 接收颜色的字符串.

总结angular中的几种样式绑定方法，先上代码，自定义组件tabbar<ul [ngStyle]="{ 'background-color': backgroundColor }"> <li *ngFor="let menu of menus; let i = index ; let even = even; let odd = odd" [ngClass]="{ even: even, odd: odd }" > <br>

还是利用tabbar来介绍，上代码<app-scrollable-tab [menus]="topMenus" (tabSelected)="handleTabSelected($event)"></app-scrollable-tab>组件内部js selectedIndex = -1; @Input() menus: TopMenu[] = []; @Output() tabSelected = new EventEmitter(); co

还是用topbar演示 ngif的使用 上代码<ul> <li *ngFor="let menu of menus; let i = index"> <a href="#" [class.active]="i === selectedIndex" (click)="handleSelection(i)"> {{ menu.title }} </a> <span class="indicator" *ngIf=

通过一个顶部导航栏看下一ngfor的使用。上代码<ul> <li *ngFor="let menu of menus; let i = index let one = first let final = last"> <a href="#" [class.active]="i === selectedIndex" [class.first]='one' [class.final]='final' (click)="selectedIndex = i

"dependencies": { "@angular/animations": "~8.0.0", "@angular/common": "~8.0.0", "@angular/compiler": "~8.0.0", "@angular/core": "~8.0.0", "@angular/forms": "~8.0.0", "@angular/platform-browser": "~8.0.0", "@angular/platform-b...

一张图看懂angular项目结构

1.安装node.js 直接官网下载https://nodejs.org/en/2.安装之后查一下 node 版本npm -v3.装好node 就有了npm npm中可以找到各种框架 网址：https://www.npmjs.com/package/@angular/cli4.安装angular cli 上面网址中 可以直接拷贝命令npm install -g @angular/cli5.如果网速慢 讲npm替换为cnpmnpm install cnpm -g --reg.