用Angular4开发了一个小型的后台发布系统,遇到了很多经典功能的开发问题,整理出来以备后期查阅,也欢迎互相交流探讨更好的实现方案。
一 第一次进入页面正常,再刷新一下报404错误
解决方法:在app.module.ts中添加如下配置
providers: [ LoginService, ArticleService, { provide: LocationStrategy, //解决刷新后404的问题 useClass: HashLocationStrategy //解决刷新后404的问题 } ],
二 中间人组件通信的过程
组件间的通信分为两种情况:
- 有共同父组件的通信
- 无共同父组件在服务中通信
有共同父组件的通信就是两个组件有相同的父组件,A组件想和B组件通信,那么A组件可以将信息通过子组件->父组件(@output)传给公共的父组件P,然后父组件P再利用父子组件(@input)通信将信息传给B。具体的实现方法可以参考中间人组件通信
无共同父组件可以在服务中进行通信。具体的一个例子,搜索框在header组件中,文章列表在main组件中,我们通过公共的service来实现搜索框输入内容,main中的article-list组件内容更新。
先在service中定义一个EventEmitter
@Injectable() export class ArticleService { searchEvent:EventEmitter<String> = new EventEmitter(); }
在Header组件中实现search方法如下
export class HomeHeaderComponent implements OnInit { searchCondition = ""; constructor( private route: Router, private articleService: ArticleService ) { } ngOnInit() { } search() { this.articleService.searchEvent.emit(this.searchCondition); } }
在main组件中订阅该事件
export class ArticleListComponent implements OnInit { public articleList:any; constructor( private articleService:ArticleService, private router: Router, ) { } ngOnInit() { this.articleService.searchEvent.subscribe( params => { this.articleService.searchArticle(params).then( result=> { this.articleList = result.data.articles; } ); } ); } }
三 获得一组checkbox中哪个被选中的id
发布文章时要选择文章类别,用户通过勾选复选框进行文章类别选择,在发布时需要知道一组复选框中哪些被选中了。
<label class="checkbox-inline" *ngFor="let atype of typeArticle"> <input type="checkbox" id="{{atype?.typeId}}" (change)="getTypeId(atype?.typeId,$event.target)">{{atype?.typeContent}} </label>
getTypeId(id:string,target) { if(target.checked === true){ $(target).parent('label').siblings().children("input:checkbox").each(function (item) { $(this).children("input:checkbox").attr("checked"); }); this.typeCheckedId = id; }else{ this.typeCheckedId = ""; } }
四 父组件调用子组件中的方法
在发布文章的组件中,有个子组件是编辑器组件,在发布文章的时需要获取编辑器组件中获取内容的方法,具体的实现方法如下,在父组件中声明子组件并添加@ViewChild,然后正常调用。
@ViewChild('editor') private editor:EditorComponent;
getEditorContent():string { return this.editor.getEditorContent(); }
五 绑定angular循环的内容到自定义属性上
attr.data-aid="{{item.aid}}"
六 编辑功能的实现
点击编辑按钮,对已发布的文章重新编辑,刚开始是准备用服务去实现,最后看了官网的示例,转换思路,用路由实现。在写的过程中,由于给每个a标签默认加上了href=‘#’,导致每次路由跳转的时候都跳转到跟路由的地方,这个地方花费了很长时间。
七 使用$("#id").modal('hide')关闭bootstrap的模态框时报错
报错信息 Property 'modal' does not exist on type 'JQuery<HTMLElement>'.
解决方法 在app.moudle.ts中引用import * as bootstrap from "bootstrap
PS: jquery的$之前也存在这样的问题,也需要引入import * as $ from 'jquery'
八 angular4的跨域问题
之前按照网上的步骤一步一步进行配置,发现总是404,起初先通过从后端通过cors来解决。
前端的解决方案的配置文件如下,在这里要注意/blog/*,之前一直配置成其他自定义的映射地址,但是后台项目的对应地址肯定是在http://localhost:8081/blog下,所以之前写的api映射地址会直接映射成http://127.0.0.1:8081/api,因此一直404,正确的修改如下:
{ "/blog/*":{ "target":"http://127.0.0.1:8081", "secure":false, "logLevel":"debug" } }以上就是发布系统开发过程中angular常见的几大问题,很多问题都是第一次遇到,所以开发进度很慢,不过最后都能解决也是一件很快乐的事情。后续在扩展功能时也会不定时更新。