关于 Angular2 学习的一些小结

---

1. Cannot read property ‘outlets’ of null 的问题

解决方法: 大概是动态生成的链接路由为空了，修改一下 <a> 标签，像下面这样先判断一下prop是否为空：

<a *ngIf="prop" [routerLink]="['/foo', prop]">链接</a>`

如果prop不为空才渲染这个<a>元素。

下面是废话了。。

遇到了这个问题，在StackOverFlow上面找了一下，说是null的原因，比如写了类似这样的模板：

<a [routerLink]="['/foo', null]"></a>

就会报错了。嗯，我英语不怎么样，大概就这么个意思。。

我是大概这样的模板：

<div>  <a [routerLink]="['/user', userDetail?.loginname, 'replies']">查看全部回复</a></div>

userDetail是发送http请求从后台获取的数据，是没问题的。

如果我注释了这行<a>元素，改为 <p>{{userDetail?.loginname}}</p> 是可以正确显示的。

最后想了半天才想到试一下上面的方法，改成了这样

<a *ngIf="userDetail?.loginname"    [routerLink]="['/user', userDetail.loginname, 'replies']">查看全部回复</a>

终于显示正常了。

猜想大概是跟NG的编译有关吧。。那时候userDetail还没有值，于是就报错了吧。在获取值的地方打印一下userDetail，它是显示在报错的错误信息下面的（虽然不知道跟这个有没有关系，呵呵。。）

---

2. 添加第三方css、js库

方法：先下载库，bootstrap、jquery…之类

npm i –save 库名字

然后在angular-cli.json文件中引用一下，比如下面加入了bootstrap,jquery,tether（这个是bootstrap要用）

<!-- angular-cli.json 部分代码 -->...省略..."styles": [  "../node_modules/bootstrap/dist/css/bootstrap.min.css",  "styles.css"],"scripts": [  "../node_modules/jquery/dist/jquery.min.js",  "../node_modules/tether/dist/js/tether.min.js",  "../node_modules/bootstrap/dist/js/bootstrap.min.js"],...省略...

这时候可能会发现不起作用，那是因为还需要最后很重要的一步：重启一下服务器。。

当时找了半天原因不知道怎么回事，心烦意乱下想到了长期使用IDE的一些心得，直接把VSCode关了重启，然后就好了。

当然了后来发现其实只要在控制台按 Ctrl+C 停止，然后重新启动一下，库就可以正常加载了。

---

3. Error: Unexpected value ‘undefined’ declared by the module ‘模块名’

解决方法/原因：大概是语法错误。仔细检查一下代码。

一个小问题，需要注意一下。

如果确定模块导入什么的灰常正确，或者找哭了都找不到错误。很有可能是语法错误。。报的错后面可能有这个: SyntaxError，就是语法错误啊。

刚开始我是忽略这个单词的。。因为明明用的是TypeScript啊，心想哪会出什么语法错误，要是TS连语法都检查不出来干脆直接用JS了嘛。。

然而还真有可能，比如说，多了一个逗号！

我在imports、declarations等这种地方喜欢这样写:

declarations: [  UserDetailRepliesComponent,  UserDetailTopicsComponent,  UserDetailMainComponent,]

最后一行末尾也要加上逗号，大概很多朋友都这样。这样没错，但是有可能没注意多了一个，或者是删除东西的时候少删除了一个逗号，就可能出错了。但是ts似乎认为这是没有错误的。还是要多加小心啊。

日后更新…