Блог

Я использую window.location.href шаблон in angular, и он выдает сообщение об ошибке cannot read property of undefined 'location' . любая помощь очень ценится.

something.component.html

<div [class.selected]="window.location.href.includes('something')">...</div>

something.component.ts

 import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) public document: Document) { }
 

something.component.html

 <div [class.selected]="document.location.href.includes('something')">...</div>
 

Зачем смешивать DOCUMENT и другие материалы JS, когда Angular уже предоставляет вам то, что вам нужно. Я предполагаю, что у вас настроен маршрутизатор, поэтому попробуйте это.

Примените это, когда в компоненте

 //something.component.ts
import { Router } from "@angular/router";

extract class SomethingComponent implements OnInit {
  routeCheck = false;

  constructor(private router: Router) {}

  ngOnInit() {
    this.routeCheck = this.route.url.includes('something')
  }

}

// something.component.html
<div [ngClass]="{'selected': routeCheck}">...</div>
 

Вне компонента, скажем, в меню

 import { NavigationEnd, Router } from "@angular/router";
import { filter } from "rxjs/operators";

//...
export class AppComponent implements OnInit {
  urlCheck = false;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this.urlCheck = event.url.includes("something");
      });
  }
}
 

Смотрите: https://stackblitz.com/edit/angular-ivy-6zao2a?file=src/app/app.component.ts