用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"
}
}