Директива Router Link не работает, когда у меня есть код обещания на app.module.ts - PullRequest
0 голосов
/ 06 июня 2019

У меня есть приложение, которое имеет страницу входа и страницу регистрации, поэтому, когда я нажимаю кнопку на обеих страницах, она должна переключаться с одной на другую.Это работает!но когда я добавил код, чтобы скрыть постоянное меню, упомянутая выше кнопка перестала работать.

Этот код состоит из обещания.

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

При входе в систему html

<div class="col-lg-4 col-md-4 col-sm-5 col-xs-5 paddingsLog">
  <a routerLink="/registro" routerLinkActive="active">
      <button type="button" class="btnGeneral btnWhite">Regístrate</button>
  </a>
</div>

То же самое для регистра

В модуле app.module

export class AppComponent {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location
  ) {
    this.menuAndTitle();
  }

  public menuAndTitle() {
    let getUrl = new Promise((resolve, reject) => {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(() => {
        console.log("Nav ends" + this.activatedRoute);
        let url = this.location.path();
        resolve(url);
        console.log("URL subscribe: " + url);
      });
    });


    getUrl.then((url: string) => {
        const urlActual = url;
        console.log('Url actual: ' + typeof(urlActual) + ' | ' + urlActual);
        if (urlActual.includes('registro')) {
          this.canShowTemplate = false;
        } else if (urlActual.includes('login')) {
          this.canShowTemplate = false;
        }
      }
    }
  }

Я вижу, что обещание влияет наповедение директивы routerLink, возможно ли это?

1 Ответ

0 голосов
/ 07 июня 2019

Я не могу объяснить, почему ваш текущий шаблон ведет себя так, но я смог найти обходной путь, выполнив следующий рефакторинг:

<div *ngIf="canShowTemplate; else not">  
  <p>
    New mode
  </p>
  <router-outlet></router-outlet>
</div>
<ng-template #not>
  <div >  
    <hello name="{{ name }}"></hello>
    <p>
      Start editing to see some magic happen :)
    </p>
    <router-outlet></router-outlet>
  </div>
</ng-template>

Кроме того, текущий подход, который вы используете для создания этогоPromise<string> подвержен утечкам, так как Router.events никогда не отписывается.Я предлагаю следующий рефакторинг в коде вашего компонента:

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location) {
  }

  ngOnInit() {
    this.menuAndTitle();
  }

  public menuAndTitle() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1),
      mapTo(this.location.path())
    ).toPromise().then((url: string) => {
      console.log('Url actual: ' + typeof (url) + ' | ' + url);
      if (url.includes('register')) {
        this.canShowTemplate = true;
      } else if (url.includes('login')) {
        this.canShowTemplate = true;
      } else {
        this.canShowTemplate = false;
      }
      console.log(this.canShowTemplate);
    })
  }

Рабочее решение можно найти в этот блиц

...