时间:2021-05-28
前面学习了vue,react 都有状态管理,如vue中的vuex是全局状态管理,在任何组件里都可以引用状态管理中的数据,同样,react中的redux和mbox也是,但遇到angular5却不知道了。
一年前使用过angular1.x做过项目,那时全局状态可以使用$rootscope,也可以使用服务Service实现,下面就用Service方式在angular5中实现下吧
先定义状态管理对象,需要存什么数据,自己定义
export class UserInfo { public userInfo: boolean; constructor(){ this.userInfo = true; //设置全局的控制导航是否显示 }}然后定义Service,如下
import { Injectable} from '@angular/core';import { Headers, Http } from '@angular/http';import { UserInfo } from './user-info.model';@Injectable() //注入服务export class ListsService{ private userInfo; constructor(private http: Http) { this.userInfo = new UserInfo(); } //设置路由显示的状态 setUserInfo(v) { this.userInfo.userInfo = v; } //获取路由显示的状态 getUserInfo() { return this.userInfo; }}配置了service一定要在ngmodule中导入,这样才能在此module中有效
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http';import { AppComponent } from './app.component'; import { AppRouterModule } from './router.module'; import { ViewComponent } from './view.component';import { ListComponent } from './list.component';import { OtherComponent } from './other.component';import { DetailComponent } from './detail.component'; import { ListsService } from './app.service';@NgModule({ declarations: [ AppComponent, DetailComponent, ViewComponent, ListComponent, OtherComponent ], imports: [ BrowserModule, FormsModule , AppRouterModule, HttpModule ], providers: [ListsService], bootstrap: [AppComponent] })export class AppModule { }然后就可以在component中使用了
@Component({ selector: 'app-root', template: ` <div > <div class="lists" *ngIf='userInfo.userInfo'> <a routerLink="/view" routerLinkActive ="active">特价展示</a> <a routerLink="/list" routerLinkActive ="active">列表展示</a> </div> <router-outlet></router-outlet> </div> `, styles:[` .lists a{ padding:0 10px; } .active{ color: #f60; } `]})export class AppComponent { private userInfo; constructor(private listsService: ListsService) { this.userInfo= this.listsService.getUserInfo(); }}在详情页中通过改变状态来改变页面
@Component({ selector: 'app-detail', template: ` <div> 详情页{{id}} <button (click)="goBack()">返回</button> </div> `,})export class DetailComponent { private userInfo; constructor( private route: ActivatedRoute, private location: Location, private listsService: ListsService ) { this.userInfo= this.listsService.setUserInfo(false); } goBack(): void { this.location.back(); } //组件销毁时执行 ngOnDestroy():void{ this.userInfo= this.listsService.setUserInfo(true); }}好了,这样就ok了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文基于上一篇Angular5的文章继续进行开发,上文中讲了搭建Angular5有道翻译的过程,以及遇到问题的解决方案。随后改了UI,从bootstrap4改到
在前面的文章中也曾经分别提到过,angular6由于存在一些稍大的变化,所以不能像Angular4到Angular5那样基本无感地进行升级,这里结合官方提示,简
目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs
引言开发ngx(angular2+以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2RC版,现在已经出angular5了,时光
在Angular5给组件本身的标签添加样式有两种方法:方式一:使用@Component的host属性@Component({selector:'myCompon