解决方法: 大概是动态生成的链接路由为空了,修改一下 标签,像下面这样先判断一下
prop
是否为空:
<a *ngIf="prop" [routerLink]="['/foo', prop]">链接a>`
下面是废话了。。
遇到了这个问题,在StackOverFlow上面找了一下,说是null的原因,比如写了类似这样的模板:
<a [routerLink]="['/foo', null]">a>
就会报错了。嗯,我英语不怎么样,大概就这么个意思。。
我是大概这样的模板:
<div>
<a [routerLink]="['/user', userDetail?.loginname, 'replies']">查看全部回复a>
div>
userDetail是发送http请求从后台获取的数据,是没问题的。
如果我注释了这行 {{userDetail?.loginname}}元素,改为
是可以正确显示的。
最后想了半天才想到试一下上面的方法,改成了这样
<a *ngIf="userDetail?.loginname"
[routerLink]="['/user', userDetail.loginname, 'replies']">查看全部回复a>
终于显示正常了。
猜想大概是跟NG的编译有关吧。。那时候userDetail还没有值,于是就报错了吧。在获取值的地方打印一下userDetail,它是显示在报错的错误信息下面的(虽然不知道跟这个有没有关系,呵呵。。)
方法:先下载库,bootstrap、jquery…之类
npm i –save 库名字
然后在angular-cli.json
文件中引用一下,比如下面加入了bootstrap,jquery,tether(这个是bootstrap要用)
...省略...
"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 停止,然后重新启动一下,库就可以正常加载了。
解决方法/原因:大概是语法错误。仔细检查一下代码。
一个小问题,需要注意一下。
如果确定模块导入什么的灰常正确,或者找哭了都找不到错误。很有可能是语法错误。。报的错后面可能有这个: SyntaxError
,就是语法错误啊。
刚开始我是忽略这个单词的。。因为明明用的是TypeScript啊,心想哪会出什么语法错误,要是TS连语法都检查不出来干脆直接用JS了嘛。。
然而还真有可能,比如说,多了一个逗号!
我在imports、declarations等这种地方喜欢这样写:
declarations: [
UserDetailRepliesComponent,
UserDetailTopicsComponent,
UserDetailMainComponent,
]
最后一行末尾也要加上逗号,大概很多朋友都这样。这样没错,但是有可能没注意多了一个,或者是删除东西的时候少删除了一个逗号,就可能出错了。但是ts似乎认为这是没有错误的。还是要多加小心啊。
日后更新…