Question

我的app.component.ts中有以下内容：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Router } from '../../node_modules/@angular/router';
import { LoginService } from '../../src/app/service/login.service';
import { ImageService } from '../../src/app/service/image.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Logikal.pro';
  error;

  @ViewChild("bgPhoto") photo:ElementRef;

  constructor(private router:Router, 
              private loginService:LoginService,
              private imageService:ImageService){}

  ngOnInit(){
    this.loginService.logOut();
    this.router.navigate(['']) // going home on refresh browser

    this.getPhoto('laptop.jpg');
  }


  getPhoto(res:string){
    return this.imageService.loadImage(res).subscribe(
      image => {
        this.photo.nativeElement.style = 'background:url('+URL.createObjectURL(image)+') center center no-repeat;background-size:cover;';


      },
      error =>{
        console.error(error);
        this.error = error;
      }
    )

  }

}

这段代码运行良好，但是我想改进我的getPhoto函数。此功能仅从服务器拍摄照片并将其作为背景图像显示在屏幕上。每个子组件都使用此图像作为背景。

我想做的是使用我的函数中的switch检索当前活动子组件的路由，以便在后台显示特定图像。当然，我将不得不使用ngOnInit事件函数以外的其他函数来放置我的代码，但是哪个事件呢？

有可能这样吗？我该怎么办？

Answer 1

解决了我的问题。但是，我想征询您的意见，或者发现其他解决方案。

ngOnInit(){
    let snapshot;
    this.loginService.logOut();
    this.router.navigate(['']); // going home on refresh browser
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
      snapshot = this.activatedRoute.root.snapshot;
      console.log(snapshot._routerState.url);
      switch(snapshot._routerState.url){
        case '/':
        this.getPhoto('laptop.jpg');
        break;
        case '/about':
        this.getPhoto('code.jpg');
        break;
        case '/news':
        this.getPhoto('startup-desktop.jpg')
        break;
        case '/cv':
        this.getPhoto('tablet.jpg')
        break;
        case '/dl':
        this.getPhoto('tablet.jpg')
        break;
        case '/contact':
        this.getPhoto('tablet.jpg')
        break;
        case 'default':
        this.getPhoto('tablet.jpg')
        break;
      }
  });

使用角度6根据活动路径设置路径

1 个答案: