Angular 6 bootstrap 4 - 导航栏品牌标志在向下滚动时没有变化

Question

我为他 bootstrap 4 添加了我的 angular 6 项目，我创建了导航栏，导航栏运行良好，但我遇到了一些冲突，当向下滚动更改导航栏徽标时，我试图更改，但我不知道如何在 angular 上正确地做到这一点。任何人都知道如何解决这个问题。

谢谢

Stack Blitz code here

头代码部分

<header class="main_menu home_menu">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" > <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png" style="width:50px;">   </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button></nav>
      </div></div></div></header>

Answer 1

我创建了Stackblitz。

我正在收听 scroll 事件并将绑定到 img 标记添加到 HTML。

TS

export class AppComponent  {
  name = 'Angular';

  logoPath = 'https://via.placeholder.com/150/0000FF/808080?Text=oldLogo'

  ngOnInit() {
    window.addEventListener("scroll", this.scroll, true); //third parameter
  }

  scroll = () => {
    const scrollPos = document.documentElement.scrollTop;

    // change '50' according to when you want to change the image
    if (scrollPos > 50) {
      console.log('New image');
      this.logoPath = 'https://via.placeholder.com/150/FF00FF/808080?Text=newLogo';
    }
    else {
      console.log('Old Image');
      this.logoPath = 'https://via.placeholder.com/150/0000FF/808080?Text=oldLogo';
    }

  };
}

HTML

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
          <a class="navbar-brand" > <img [src]="logoPath" ...

Angular 6 bootstrap 4 - 导航栏品牌标志在向下滚动时没有变化

Angular 6 bootstrap 4 - navbar brand logo not change in scroll down

html

css

twitter-bootstrap

angular

angular6