Angular 图片上传

input控件上传图片,div实现外观

//html
<div (click)="upload()" id="imagePreview">
    // 设置为自己的图片路径
    <img src="assets/increase.svg">
    <span id="text">上传图片</span>
</div>
<input type="file" id="file" accept="image/*" (change)="imagePreview($event)">
// css
#imagePreview {
    width: 80px;
    height: 80px;
    border: 1px dotted;
    padding-bottom: 5px;
    background-color: white;
    // 设置背景图片大小、不重复、居中
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80px 80px;
}
input {
    display: none;
}
span {
    color: #707070;
}

效果:

添加交互效果

// js
upload() {
    document.getElementById('file').click(); // 触发上传
} 
// 预览图片
imagePreview(event) {
    const previewImage = document.getElementById('imagePreview');
    const uploadFile = document.getElementById('file');
    const reader = new FileReader();
    reader.onloadend = () => {
        // 设置图片为背景
        previewImage.style.backgroundImage = 'url(' + reader.result + ')';
        // 将原“+”号和文本内容隐藏
        const image = document.getElementById('image');
        image.style.display = 'none';
        const text = document.getElementById('text');
        text.style.display = 'none';
    };
    if (uploadFile) {
        reader.readAsDataURL(event.target.files[0]);
    }
}

上传效果:

Angular Router 变化改变底部栏图标

构造函数中监测路由变化,这个方法对hash路由也适用

router.events.subscribe((e: RouterEvent) => {console.log(e.url);})

如果当前urlgardevoir.yoga/home或者gardevoir.yoga/#/home, 打印出来内容为'/home'

//home.html
<img src="assets/home.svg" alt="home" width="40px" *ngIf="isHome">
<img src="assets/home_released.svg" alt="home" width="40px" *ngIf="!isHome">
// home.ts
constructor(private router: Router) {
    router.events.subscribe((e: RouterEvent) => {
        if (e.url === '/home') {
           this.isHome = true;
        } else this.isHome = false;
    });
}

这是一个比较蠢的方法,如果有其他更好的方法会更新,同时期待分享。