boke | Angular4常见问题踩坑指南

用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常见的几大问题，很多问题都是第一次遇到，所以开发进度很慢，不过最后都能解决也是一件很快乐的事情。后续在扩展功能时也会不定时更新。

boke | Angular4常见问题踩坑指南

猜你喜欢