Angular 使用总结（四）组件之常用技巧

1. 加判空

举例：

原因：

解决：加问号，Angular 发现为空时，忽略掉这部分内容，不会导致整个应用崩掉

<div>
    student name is {{stu?.name}}<br>
    student age is {{stu?.age}}
</div>

2. Any 类型

<p>The item's undeclared best by date is: {{$any(stu).newProp}}</p>

AOT模式下，会检查stu的类型，如果真的需要引用定义外的属性名，可以转换成any

3. 属性和事件起别名

虽然不推荐，但有时确实需要给暴露出去的属性换一个名字

  @Output('myEvent')
  clickEvent = new EventEmitter<any>();

使用，注意第一个Button现在点了已经没反应了

<app-simple-test (clickEvent)="show($event)"></app-simple-test>
<app-simple-test (myEvent)="show($event)"></app-simple-test>

4. 常用的内置管道：

{{stu}}<br><br>
{{stu | json}}<br><br>

{{str}}<br><br>
{{str | uppercase}}<br><br>
{{str | lowercase}}<br><br>

{{str}}<br><br>
{{str | slice:2:5}}<br><br>

{{myDate}}<br><br>
{{myDate | date:"MM/dd/yy"}}<br><br>

{{data}}<br>
{{data | percent:'4.3-5'}}<br>